Problems working with png's

I have a png containing a circle filled with white and I am applying brightness and color depending on whether I move the mouse over two different spectra. I need to apply color and brightness on the circle considering it as a png and not as it is currently considering it as a jpg. Do you have any suggestions please?
Thanks in advance. (62.6 KB)

I can’t look at the file, but how about using a clip mask (CSS) or really easy a white PNG with a round punch out :upside_down_face:

(not a workday in Germany).

1 Like

Thanks, I will follow the solution from your ideas!

only in Berlin :wink:

... and McPomm :slight_smile:

1 Like

Can I ask, does it have to be a png. can it be a simple ellipse ?
If so you code will just work as is.

Also , I added these to your code so you could click to select and move out of the canvas without making changes as you move out. mouse out actually resets the active so when you mouse over again it again makes changes.

colorPickerCanvas.addEventListener('click', function(e) {
	 colorPicker = { active: false, color: '' }
	colorPickerCanvas.addEventListener('mouseout', function(e) {
	  colorPicker = { active: true, color: '' }

brightnessPickerCanvas.addEventListener('click', function(e) {
	 brightnessPicker = { active: false, brightness: 1 }
	brightnessPickerCanvas.addEventListener('mouseout', function(e) {
	  brightnessPicker = { active: true, brightness: 1 }

ColourPicker (69.0 KB)