CODEWITHSUNDEEP
javascripthtmlcanvas
Dariel Pratama
Dariel Pratama

Reputation: 1675

HTML5 Canvas transparency for all overlapping content

I made an Drawing App with HTML5, it's just a basic paint/brush tool that currently works good. the problem is, i don't know how to make overlapping path have the same opacity.

i tried to use globalAlpha property but the overlap content is get bolder and bolder everytime i draw the line.

ctx.beginPath(); // init at onmousedown
ctx.lineTo(x, y); // at onmousemove
ctx.stroke(); // at onmousemove

Upvotes: 1

Views: 1182

Answers (1)

vdavid
vdavid

Reputation: 2544

Edit: OK I got it all wrong. Basically all you need is to redraw your canvas "background" before you draw your lines.

It looks like you have this: http://jsfiddle.net/4naMG/2/

And I think you want this: http://jsfiddle.net/4naMG/1/

The only difference is that in the second case I redraw the background. Since I don't do anything special I just clear the canvas:

ctx.clearRect(0, 0, c.width, c.height);

Edit: same example with mouse button management and multi-path: http://jsfiddle.net/4naMG/3/

(nb: I cheated in the case of single-point paths for the sake of clarity).

Upvotes: 1

Related Questions