Problems working with png's

1

Hello!
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.

Sample
Sample1127×797 119 KB

ColourPicker.hype.zip (62.6 KB)

2

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
3

Thanks, I will follow the solution from your ideas!

4

only in Berlin :wink:

5

... and McPomm :slight_smile:

1 Like
6

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 2.hype.zip (69.0 KB)

2 Likes