CODEWITHSUNDEEP
canvasflood-fill
Mayur Kukadiya
Mayur Kukadiya

Reputation: 2747

How to remove color using mouse click on canvas?

I want to Implement background eraser functionality for my website. I am using canvas for that. I can put image data into canvas and get image data from canvas.

I have implement flood fill algorithm for remove color from particular place.

Here I tried it : 

`http://jsfiddle.net/Mark_1998/boz43x87/`

After I googling too much, I found that black color not remove in this algorithm ,

As a rule of flood fill algorithm, If target color and replacement color are same then it will return function (no process further).

In My case, exact same doing here. In short :

  1. Target Color : rgba(255,0,0,145) -> replacement color : rgba(0,0,0,0); -> working fine (remove red color and set transparent black).
  2. target Color : rgba(0,0,0,255) -> replacement color : rgba(0,0,0,0) =>not working fine (reason : I just check only three color i.e. R,G,B)

Is there any way to match color with it's alpha value ?

If I replace new color (replacement color) with any other color , then it will not remove that color from image when target color is same as replacement color. e.g. i set replacement Color rgba(255,255,255,0) instead of rgba(0,0,0,0), then it will remove black color from image fine , but can't remove white color from image.

The only way for remove that color is finding distance of color with it's alpha value. but i don't know how to find that distance.

Please help me.

Upvotes: 2

Views: 123

Answers (1)

tomasantunes
tomasantunes

Reputation: 945

You can change the alpha value with the globalAlpha property.

ctx.globalAlpha = 0;

Upvotes: 1

Related Questions