I’m no artist but I sure had a lot of fun doing this challenge.

The task was to create a simple page that would all the user to draw or write on it anything. No 3-D ofcourse

Let’s break down the program:

1. Create a canvas to draw on
2. Set dimensions and other properties of canvas
3. Check if mouse is pressed down to start drawing
4. Begin drawing when mouse is pressed by joining the points of the path as mouse moves and stops
5. Change the color of the stroke as drawing occurs
6. Make sure no drawing occurs if mouse is not pressed down.

Initially it seemed way too complex but after breaking the task into small ones, it became more clear how to approach it. The great thing about working with HTML5 Canvas is that you can do all sorts of cool stuff like changing the stroke width or colour as the drawing occurs and your imagination will probably limit you in the end.

There’s more to HTML5 canvas than what I worked with today. Scratching the surface did give me a glimpse of what I can accomplish with it and I look forward to experimenting more with it.

Today i learned:

• HTML5 canvas
• More ES6 style code

What cool projects have you done that utilised HTML5 canvas? Feel free to tweet @me about them. You can find the code here.