Jul 052012
 
Article HTML

In this post we will show how to set up in our web page a drawing area where the user can draw using the mouse. The drawing can then be uploaded to the server to be stored as an image file (default to png format), or processed as desired.

We will make use of this functionality in our  diccionario mandarín-español. The user will be able to enter the hanzi symbol to be looked up by drawing it with the mouse. This will also require an OCR (Optical character recognition)  software with support for simplified chinese. This topic will be subject of a later post in this blog.

1. HTML code

The  HTML code of the page will include an empty <div> element. Inside this element, the javascript initialization code will create a HTML5 <canvas> element. The HTML code must also load the jquery library that will be used to manipulate the DOM elements in the page:

As we can see, the html code also loads the “excanvas” library to give support to Internet Explorer.

In the <body> element there is also a call onload=”initCanvas();” to initialize the drawing area.

 

2. Javascript code for the initialization and event handling.

The code that creates the canvas is as follows:

Next, also inside the initialization routine, we add the code to process the actions performed by the user with the mouse while drawing:: pressing the mouse button, move the mouse and release the mouse button. This is done by assigning javascript event handlers to the events mousedown, mousemove and mouseup:

As the user moves the mouse, ‘mousemove’ events are generated, and the event handler saves the triplets [x, y, state] in the ‘moves’ array. x, y are coordinates where the cursor is located, and state is “true” if the mouse button is pressed at that time.

3. Update of the drawing area

Finally, the ‘redraw’ function is called for every new entry added to the ‘moves’ array to refresh the canvas with the new data:

And here is the final result:

4. Sending the drawing to the server as an image

By means of the ‘toDataURL’ function we can retrieve the content of the canvas as a base64 encoded image (in png format by default), and send it to the server as the value of a form variable (using the POST method to avoid having trouble because of the image size). Assuming that there is already in the server a script named  ‘upload-image.php’ that will receive the image and store it as ‘/uploads/image.png’, the javascript function to perform the upload can be as follows:

 

We just have to add now to the HTML code a button to call the ‘upload’ function, and an <img> element to display the image stored in the server after it has been uploaded:

Note: As you can see, we are adding a ‘timestamp’ argument to the url of the image being loaded. The value of this arguments changes every time the image is requested. This is not really required, but it prevents the browser or intermediate proxy servers from serving and older image from cache, forcing it to always retrieve the image from the web server.

The script ‘upload-image.php’  script to receive the image and store it in the server is as follows:

—-

 Posted by at 8:02 pm

  3 Responses to “How to draw with the mouse in a HTML5 canvas”

  1. […] a previous post we explained how to draw with the mouse in a HTML canvas. In another post we also commented the steps to take to install the Tesseract Optical Character […]

  2. good tutorial.
    I have just a question:
    based on your code, how to get it works with safari on ipad by finger paiting?
    thanks in advance.

    • Hi Fang,
      Good question!
      On mobile devices, touch events are generated instead of mouse events. The code should have to be re-written to use ontouchstart(), ontouchmove(), etc. (and also preventDefault(), to avoid the system trying to perform the default scrolling action). To make it cross-browser and cross-platform compatible, you could use this jQuery plugin, or else the Touchable jQuery plugin.

 Leave a Reply

(required)

(required)