## 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 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!

### 6 Responses to “Having fun with HTML5 – Simple painting app using Canvas”

1. Chris says:

Love this code.…

2. ben says:

awe­some tuto­r­ial. Learned alot. thnxs and can’t wait for the next tutorial

3. […] Hav­ing fun with HTML5 – Sim­ple paint­ing app using Can­vas | theburningmonk.com […]

4. Arun David says:

Relly a sim­ple and nice code :)

5. alice says:

love your app, but i have a ques­tion for you, how can save your image like save image in paint(i meant you must chose your posi­tion in the com­puter before you save)..??

6. theburningmonk says:

@alice — just click the bar “Step 2 — Save”, this will give you a PNG that you can just right click and save.