Mycanvas.addEventListener('mousemove',onMouseMove,false) register mouse move and mouseup events get x and y coordinates where mouse left button is pressed if mouse' right button is clicked then don't proceed Mycanvas.removeEventListener('mousemove',onMouseMove,false) if mouse's left button is no longer pressed than stop drawing paths draw a line - this is sort of per pixel dot Y = evt.offsetY?evt.offsetY:(evt.pageY - ) X = evt.offsetX?evt.offsetX:(evt.pageX - ) get the current x and y coordinates from mouse move event move to x and y coordinates where mouse's left button was pressed you should append this code to above function code To start with here is our HTML code for our canvas element Problem: Create simple sketchpad on which user can draw I think my handwriting is better than what you see above 🙂Īnyway lets get back to business.

Pardon me if you think that above is not so cool. Here is a screenshot what we are aiming for. Its sort of quick reference to functions and properties of canvas What makes is strong is the API that it makes available through JavaScript.īefore I go on further, there is a cool cheat sheet available from

A demo link will be available at the end of this post.Īs I said in one of my previous post that HTML5 itself is just tags, attributes, definitions etc. So to understand how Lines and paths works in canvas we will be create a basic sketchpad. What better way than to learn by example. This is my follow up post from my previous post that you can read if you haven’t already that briefly introduced HTML5 canvas.įrom here on we will be covering canvas in a little bit of more depth.

Html sketchpad