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.

simple html5  canvas sketchpad example

 

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

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

Now we will write a function called bootSketchPadas shown below

Now lets go ahead and init some defaults as shown below

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 things but here are links if you want to explore further

  • strokeStyle – responsible for giving our stroke a color
  • lineWidth – width that you are willing to give for line to be drawn by us
  • lineCap – how does line heads should look
    html5 canvas linecap
  • lineJoin – how should the line join looks
    html5 canvas line join
  • fillRect(float x, float y, float w, float h) – the rectangle we created on our canvas surface.
  • fillStyle – the color that we gave to our rectangle

Alright now lets carry on with our function and introduce mouse event handlers

And that’s it, the sequence of function call in onMouseMove function is important. Most important function calls are moveTo that tells from where you want to draw the line from and lineTo which tells that to which point you wish to draw line to. stroke() just gives color to our line. beginPath() and closePath() are self explanatory

Here is some really basic style given to our canvas element

 

Browser support

Try out the demo in one of the following browser. Just make sure that you running the latest version of your browser.

Demo

Ok so nothing is complete without demo so to highlight what we have done so far here is a link to the demo page.

http://jaspreetchahal.org/examples/html5/simple-canvas-sketch-demo.html

I hope that you would have learnt something out of what I had to show you today.

We will be looking to go further with our learning and I will introduce you further with more advanced path methods in my next post under html5 category so stay tuned.

If you find any issues or you think that whatever is shown above can be improved please leave your comments.

I hope that this helps

Cheers,

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.