Question

So, I’m making a relatively trivial HTML5 Canvas drawing web app. Basically, you can select your color, and then draw on a 500×500 canvas. It’s going to be themed as a “graffiti” wall, so I am attempting to create a graffiti effect to the drawing, much like the Spray tool in MS Paint of yore.
Feel free to take a look at it here.

In order to facilitate this effect, I’m making use of web workers to callback on mouse events and asynchronously draw to the canvas. The naive implementation I have now is that on any mouse event, 5 pixels are randomly drawn around the coords of the event.

What I would like to do though, is to have those pixels drawn continuously from the mousedown event until the mouseup event, while updating the coords on mousemove events. From my limited knowledge of JavaScript, I imagine that this could involve a setTimeout(), but I’m not sure how to manipulate this to achieve what I want.

DISCLAIMER: This is part of a school project, and as such I am trying to avoid JQuery, Ajax, and other such frameworks; my goal here is to make an as-pure-as-possible JavaScript/HTML5 web app.

Thanks in advance.

Answer 1

If you want to use a WebWorker (for example for more complex drawing algorithms), I could think of the following setup:

• onmousedown, spawn a new worker and register a handler on it that paints objects on the canvas
• onmouseup (and -leave etc), terminate the worker
• onmousemove, if a worker exists determine mouse coordinates and send them into the worker

In the worker

• listen to new mouse coordinates
• start an timeout interval which constantly fires draw-events (depending on current coordinates and a clever algorithm)

Yet I think that a Worker is too much overhead for a simple graffiti tool. Use the simple solution without a Worker like @Esailija demonstrated.

If you had a more complex application which could make good use of Workers, you wouldn’t really spawn them onmousedown and terminate them. Instead, you maybe instantiated single Workers for single kinds of tools, and fired start-processing and end-processing events to them.