On Sat, Dec 18, 2010 at 11:00 AM, anonymous <[email protected]> wrote:
> I was trying to create a drawing application using canvas, and I wanted to > change the opacity of the brush. When I changed the opacity of the stroke, > it ended up like this: http://jsfiddle.net/PGwy6/. I have no idea why this > is happening. As you continue to draw, the semi-transparent paint is applied over and over again in the same spots. As soon as you have a pixel with 0.1 opacity applied 10 times you have 1.0 opacity. You can see this as you compare a quick left-to-right drag of paint: http://imagebin.org/index.php?mode=image&id=128458 to a slow left-to-right drag of paint: http://imagebin.org/index.php?mode=image&id=128459 One option is to track all the points of the stroke along the drawn path and then to stroke a single path moved to each point with the 0.1 opacity paint once. This will require clearing the canvas each time and re-drawing the entire stroke. Another option is to call paint.ctx.beginPath(); at the beginning of your draw() function. Then you'll get something like this: quick: http://imagebin.org/index.php?mode=image&id=128460 slow: http://imagebin.org/index.php?mode=image&id=128461 The option you want depends on whether you're trying to simulate something like a paintbrush with a continuous stretch of color or a sprayer that's pulsing out colored circles as it moves around. - Richard -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/[email protected]/ To search via a non-Google archive, visit here: http://www.mail-archive.com/[email protected]/ To unsubscribe from this group, send email to [email protected]
