theburningmonk.com

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 together a sim­ple paint­ing app using the can­vas and here is the end result.

Here’s some screenshots:

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

   3:  

   4: function getRandomOffset() {

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

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

   7:  

   8:     return {

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

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

  11:     };

  12: }

  13:  

  14: this.startDrawing = function (position) {

  15:     _center = position;

  16:  

  17:     // spray once every 200 milliseconds

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

  19: };

  20:  

  21: this.finishDrawing = function (position) {

  22:     clearInterval(_intervalId);

  23: };

  24:  

  25: this.spray = function () {

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

  27:  

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

  29:         var offset = getRandomOffset();

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

  31:  

  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 pixel using the cur­rently con­fig­ured colour within the radius of the mouse pointer.

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

Sav­ing the Can­vas to an Image

One of the cool things you can do with the <can­vas> ele­ment is the abil­ity 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 toDataURL() on the <can­vas> ele­ment and then use the returned value to set the src prop­erty on the <img> element.

Demo

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­ested in the source code, you can get it off github here.

Enjoy!