Having fun with HTML5 – Simple painting app using Canvas

It feels like a lit­tle while since I last played around with the <can­vas> ele­ment, so I spent some time over the week­end and put togeth­er a sim­ple paint­ing app using the can­vas and here is the end result.

Here’s some screen­shots:

image image image

Spray Tool

One of the inter­est­ing things with this sim­ple paint­ing app is the spray tool, here’s what I did to achieve the effect:

   1: var _intervalId,    // used to track the current interval ID

   2:     _center;        // the current center to spray


   4: function getRandomOffset() {

   5:     var randomAngle = Math.random() * 360;

   6:     var randomRadius = Math.random() * radius;


   8:     return {

   9:         x: Math.cos(randomAngle) * randomRadius,

  10:         y: Math.sin(randomAngle) * randomRadius

  11:     };

  12: }


  14: this.startDrawing = function (position) {

  15:     _center = position;


  17:     // spray once every 200 milliseconds

  18:     _intervalId = setInterval(this.spray, 10);

  19: };


  21: this.finishDrawing = function (position) {

  22:     clearInterval(_intervalId);

  23: };


  25: this.spray = function () {

  26:     var centerX = _center.X, centerY = _center.Y, i;


  28:     for (i = 0; i < density; i++) {

  29:         var offset = getRandomOffset();

  30:         var x = centerX + offset.x, y = centerY + offset.y;


  32:         drawingCxt.fillRect(x, y, 1, 1);

  33:     }

  34: };

The start­Draw­ing func­tion is called when the mouse­Down or a sub­se­quent mouse­Move event is raised, it in turn sets up an inter­val event which is trig­gered every 10 mil­lisec­onds and draws one pix­el using the cur­rent­ly con­fig­ured colour with­in the radius of the mouse point­er.

When the mouse­Up event is raised, the inter­val event han­dler is unbound.

Saving the Canvas to an Image

One of the cool things you can do with the <can­vas> ele­ment is the abil­i­ty to get a data:URL con­tain­ing a rep­re­sen­ta­tion of the image as a PNG file, which you can then use as the source for an <img> ele­ment so that the user can then save.

The code required to do this is as sim­ple as call­ing toDataU­RL() on the <can­vas> ele­ment and then use the returned val­ue to set the src prop­er­ty on the <img> ele­ment.


You can try out the live demo at http://sketchy.theburningmonk.com or via the short­link http://lnk.by/fghis.

If you’re inter­est­ed in the source code, you can get it off github here.