request: dynamic (on-the-fly) change background color

[stewie]

As is, must "Start With" a chosen bgcolor. It would be much more interesting to experiment with changing bgcolor (of the canvas element, via css) while the drawing progresses.

Separately, it would be interesting if the scaled (to match canvas dimensions) source image was viewable real-time (without pausing the drawing). The source image could be displayed to a higher z-index element, with a toggle (better: an opacity slider) to control its visibility.

If, instead of displaying the source image to an img element, the source image was rendered to a separate canvas context, the controls could include a selector enabling the user to toggle globalCompositeOperation modes...

[zden]

I was as well thinking how limiting fixed bgcolor is. It is possible that a canvas is also holding alpha channel so it can be layered over another one holding changeable solid color or original image?

Filtered image is created in canvas step by step so change of the bgcolor and repaints all the steps is not reasonable solution. Only when canvas can be alpha channeled and could be layered over another canvas. Is that possible?

Ability of original picture display with opacity overlay was also in my head. However, are you trying to tell me that globalCompositeOperations do not apply only for draw operation in a canvas, but can also be globally used between layered canvases? I though comp.ops works only while drawing in the context where was set.

[stewie]

Repainting the background color of the canvas element step-by-step is not necessary. See: http://mrdoob.com/projects/harmony/ in this example, clicking the leftmost control raises a colorpicker to change brush drawing color; second control raises colorpicker to change bgcolor of the canvas element.

Canvas drawing operations are rendered into a "2d context", not directly into the DOM element containing a canvas... and even when non-opaque strokeStyle/fillStyle color is painted to canvas, all pixels not yet painted are empty/transparent within the canvas context, allowing the background color to show.

Alternatively, could declare an additional canvas element to the page (assign a higher z-index attribute) and css position it to align/overlap the existing canvas.

In the animation loop, avoid calling fillRect() or clearRect() {or, resizeTo()} each frame. For a stroked painting application, such calls are both unnecessary and computationally expensive. Only need to call clearRect() when "Restart" button has been clicked.

re "However, are you trying to tell me that globalCompositeOperations":

-- DOM element for the canvas has its own attributes, including background-color

-- globalCompositeOperations are "global" only within a given canvas context. Interesting effects are possible by employing multiple canvases & contexts, and z-index stacking them then: toggling their visibility and/or changing their css opacity and/or dynamically altering their z-index positioning.

-- the {img} element containing the original image can be css positioned to perfectly align with the canvas element(s) and a slider control would enable the user to dynamically change its opacity. The z-index of the image container could be (yet doesn't need to be) lower than that of the canvas element(s).

[zden]

of course, that's what I would never do if not necessary - in this filter, canvas is really only cleared (fillRect-ed) after Restart otherwise content is just gradually added to the canvas. When I find time for the next version, I'll explore canvas transparency and combining more of them together which I'll use for changeable bgcolor and blending with the original. Img positioning, etc. seems like no problem. Check my other (much larger) project http://secondrealm.is - I'm not working on the web apps for a long time, but did put my experiences from real-time graphics processing in native soft-rendering C apps into web space..

[zden]

Hello Stewie. In recent version it's done as you proposed. Background color is tweakable during the paint process and can be altered at any time. Even the bitmap will be saved as transparent.