HTML5 canvas learning paths a simple sketchpad example

Hello, This is my follow up post from my previous post that you can read if you haven't already that briefly introduced HTML5 canvas. From here on we will be covering canvas in a little bit of more depth. What better way than to learn by example. So to understand how Lines and paths works in canvas we will be create a basic sketchpad. A demo link will be available at the end of this post. As I said in one of my previous post that HTML5 itself is just tags, attributes, definitions etc. What makes is strong is the API that it makes available through JavaScript. Before I go on further, there is a cool cheat sheet available from http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf You can download it or just print it. Its sort of quick reference to functions and properties of canvas Here is a screenshot what we are aiming for.   Pardon me if you think that above is not so cool. I think my handwriting is better than what you see above :) Anyway lets get back to business. Problem: Create simple sketchpad on which user can draw To start with here is our HTML code for our canvas element [crayon-5b28a5dca65fb577503793/] So nothing new above as we have seen already how to create one before. Remember that this example only touch base few API methods that you should be aware of when you deals with paths Now lets jump back to our JavaScript logic. First we will add onload listener to boot up our application as shown below [crayon-5b28a5dca660c152069239/] [crayon-5b28a5dca6613171345651/] Now we will write a function called bootSketchPadas shown below [crayon-5b28a5dca6619241879928/] [crayon-5b28a5dca661f162671541/] Now lets go ahead and init some defaults as shown below [crayon-5b28a5dca6625891858688/] So as you can see that we used a few context properties to initialize an action. We are checking if canvas context exists else we are returning from function. Above are really basic … [Read more...]