Created: 2014-05-19 16:02
Updated: 2016-03-21 13:25
License: gpl-2.0



A simple library for multitouch painting with and without jQuery.

What does it do?

This is a jQuery Plugin for multitouch canvas painting on tablet computers. What makes this little project unique is its ability to handle multiple touch events. It also works on desktop computer using a mouse.


Just import the library:

<script type="text/javascript" charset="utf-8" src="path/to/js/folder/jquery.canvaspaint.js"></script>

Then simply use it as a jQuery plugin in your scripts as you need it:



There is an API for manipulating strokes and catching events.


There are Methods for manipulating the strokes. You can:

  • Set the color via method setColor
  • Set stroke width with setLineWidth
  • Clear the canvas using clear method
  • Toggle the eraser with setEraser method
  • Save the image content via method getImageData
  • Restore image using method setImageData
  • Start path with startLine
  • End path with endLine
  • Draw a line using drawLine with start and end point ech containing x and y value

The API is triggered through the jQuery plugin:

$('#drawarea').canvaspaint('methodname', arguments);


There are three events you can listen to:

  • startLine, triggered when a line is started
  • drawLine, triggered when a line is drawn
  • endLine, when a line has ended
  • clear, when the drawing area was cleared

When triggered jQuery style it is done like this:

$('#drawarea').canvaspaint('drawLine.canvaspaint', function (e, data) {});

The data parameter contains the data that is passed in the event. The canvaspaint part of the event name is the namespace.

When triggered directly, namespace and event name are ordered the other way. e.g. canvaspaint.drawLine.

document.getElementById('drawarea').addEventListener('canvaspaint.drawLine', function (e) {});
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more