Feature Request: Set brush opacity

[Innders]

It would be very useful to be able to set the opacity, just like setting the weight.

sketchpad.opacity = 0.75; // 0-1

Just setting the opacity of the stroke colour causes this horrible effect.

Will opacity even be possible with the way things are done?

Love the library by the way, thanks 🙏

[jakubfiala]

Hey @Innders thank you for the feature request and I'm glad you like the library! I've actually removed the opacity property in v4 because of exactly this issue.

What's happening there is the stroke is actually composed of many smaller segments. Each call to the draw method results in a new segment being drawn and closed.

Unfortunately this is necessary to reliably draw a continous, solid stroke in real time. To make the stroke visible while drawing, we must call the stroke() method on every draw() call, but because the segment has a certain weight around each point, it overlaps the end of the previous segment.

AFAIK the only way to solve this would be to clear and redraw the whole path from the beginning every time a new point is added to it. All paths that our current path overlaps would have to be redrawn, too. Essentially, Atrament would have to store a vector representation of the drawing at all times. This is totally possible, but it's fundamentally a different kind of approach. Atrament is designed to work specifically like a physical pen, i.e. everything you draw is "committed" to the canvas and cannot be redrawn, only erased.

However, if you can think of a solution that doesn't require such a big rearchitecting of the lib, I'm all ears :) Going to close this issue for now but if you have other thoughts, feel free to reopen it!

[Innders]

Thanks for the quick and thorough response @jakubfiala 🥳 I thought that might have been that case 😕

There is one idea though but I'm not sure it makes sense to implement it into this library.

The real time line being drawn could be a second temporary canvas on top of the "final" canvas. This would allow you to set an opacity on the drawing canvas as whole to give the transparent effect. Once the drawing has finished, the drawing canvas is drawn to the final canvas with the appropriate opacity.

I might be able to hack something together using two instances of Atrament. I will let you know how I get on!

[jakubfiala]

ah cool, that might indeed work! It does mean the library would have to create its own DOM elements, unless we say there must be 2 canvases provided. I'll reopen the issue so it stays visible, thanks for the initiative 🙏