Click here to Skip to main content
15,439,117 members
Articles / Web Development / HTML5
Posted 26 Apr 2012


30 bookmarked

HTML 5 Canvas - A Simple Paint Program (Touch and Mouse)

Rate me:
Please Sign up or sign in to vote.
3.67/5 (3 votes)
26 Apr 2012CPOL
This is an alternative for "HTML 5 Canvas - A Simple Paint Program"


I've seen quite a few HTML5 canvas painting examples, but I had not seen one that worked on both a touch screen, and on a normal desktop with a mouse.  This is just a very basic example of what is needed to get this feature working on both. 


Some time back I had to develop an HTML5 customer input form which also included a  signature.  This would be used mostly on a tablet, however it was possible it needed to be supported on a drawing pad and a desktop PC.  I viewed quite a few online examples of painting on the canvas, but none worked on touch screens AND desktops: 

This is simply an alternate to Gordon Kushner's article on the HTML5 canvas & painting.  His article can be found here:   His code works well; though again it does not work on a touch device. 

Most of the code here I found from various examples on Code Project and Stack Overflow.  I simply put them all together to get this demo working. 

Using the code

This code simply determines which device type you are using and sets up the canvas event handlers accordingly. 

<!DOCTYPE html>
<html lang="en">
   <meta charset="utf-8" />
   <title>Desktops and Tablets</title>
   <script type="text/javascript" src=""></script>
   <script type="text/javascript">
      $(document).ready(function () {

      // works out the X, Y position of the click inside the canvas from the X, Y position on the page
      function getPosition(mouseEvent, sigCanvas) {
         var x, y;
         if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
            x = mouseEvent.pageX;
            y = mouseEvent.pageY;
         } else {
            x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
         return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
      function initialize() {
         // get references to the canvas element as well as the 2D drawing context
         var sigCanvas = document.getElementById("canvasSignature");
         var context = sigCanvas.getContext("2d");
         context.strokeStyle = 'Black';
         // This will be defined on a TOUCH device such as iPad or Android, etc.
         var is_touch_device = 'ontouchstart' in document.documentElement;
         if (is_touch_device) {
            // create a drawer which tracks touch movements
            var drawer = {
               isDrawing: false,
               touchstart: function (coors) {
                  context.moveTo(coors.x, coors.y);
                  this.isDrawing = true;
               touchmove: function (coors) {
                  if (this.isDrawing) {
                     context.lineTo(coors.x, coors.y);
               touchend: function (coors) {
                  if (this.isDrawing) {
                     this.isDrawing = false;
            // create a function to pass touch events and coordinates to drawer
            function draw(event) {
               // get the touch coordinates.  Using the first touch in case of multi-touch
               var coors = {
                  x: event.targetTouches[0].pageX,
                  y: event.targetTouches[0].pageY
               // Now we need to get the offset of the canvas location
               var obj = sigCanvas;
               if (obj.offsetParent) {
                  // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
                  do {
                     coors.x -= obj.offsetLeft;
                     coors.y -= obj.offsetTop;
				  // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
				  // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
                  while ((obj = obj.offsetParent) != null);
               // pass the coordinates to the appropriate handler

            // attach the touchstart, touchmove, touchend event listeners.
            sigCanvas.addEventListener('touchstart', draw, false);
            sigCanvas.addEventListener('touchmove', draw, false);
            sigCanvas.addEventListener('touchend', draw, false);
            // prevent elastic scrolling
            sigCanvas.addEventListener('touchmove', function (event) {
            }, false); 
         else {
            // start drawing when the mousedown event fires, and attach handlers to
            // draw a line to wherever the mouse moves to
            $("#canvasSignature").mousedown(function (mouseEvent) {
               var position = getPosition(mouseEvent, sigCanvas);
               context.moveTo(position.X, position.Y);
               // attach event handlers
               $(this).mousemove(function (mouseEvent) {
                  drawLine(mouseEvent, sigCanvas, context);
               }).mouseup(function (mouseEvent) {
                  finishDrawing(mouseEvent, sigCanvas, context);
               }).mouseout(function (mouseEvent) {
                  finishDrawing(mouseEvent, sigCanvas, context);
      // draws a line to the x and y coordinates of the mouse event inside
      // the specified element using the specified context
      function drawLine(mouseEvent, sigCanvas, context) {
         var position = getPosition(mouseEvent, sigCanvas);
         context.lineTo(position.X, position.Y);
      // draws a line from the last coordiantes in the path to the finishing
      // coordinates and unbind any event handlers which need to be preceded
      // by the mouse down event
      function finishDrawing(mouseEvent, sigCanvas, context) {
         // draw the line to the finishing coordinates
         drawLine(mouseEvent, sigCanvas, context);
         // unbind any events which could draw
   <h1>Canvas test</h1>
   <div id="canvasDiv">
      <!-- It's bad practice (to me) to put your CSS here.  I'd recommend the use of a CSS file! -->
      <canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></canvas>


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer
United States United States
I've been a developer since 2004. I work in C#, ASP, WPF, XAML, Silverlight, Windows Store, HTML/JavaScript/CSS, Java, Delphi, and SQL. I write for web, desktop, Android, Windows Mobile, Windows Store, and database servers.

Comments and Discussions

QuestionI did a simple web drawing thing a while back (Angular Directive to draw) Pin
Sacha Barber24-Mar-15 23:13
MemberSacha Barber24-Mar-15 23:13 
QuestionOnly works sometimes... Pin
Ricardo Santos25-Sep-14 3:54
MemberRicardo Santos25-Sep-14 3:54 
AnswerRe: Only works sometimes... Pin
gardnerp25-Sep-14 4:45
Membergardnerp25-Sep-14 4:45 
GeneralRe: Only works sometimes... Pin
Ricardo Santos25-Sep-14 4:50
MemberRicardo Santos25-Sep-14 4:50 
GeneralRe: Only works sometimes... Pin
gardnerp25-Sep-14 4:56
Membergardnerp25-Sep-14 4:56 
BugLines aren't placed correctly Pin
SYKKID3-Dec-13 5:52
MemberSYKKID3-Dec-13 5:52 
GeneralRe: Lines aren't placed correctly Pin
gardnerp3-Dec-13 6:08
Membergardnerp3-Dec-13 6:08 
GeneralRe: Lines aren't placed correctly Pin
SYKKID4-Dec-13 4:10
MemberSYKKID4-Dec-13 4:10 
GeneralOff Topic Pin
OriginalGriff9-Dec-13 9:01
mveOriginalGriff9-Dec-13 9:01 
GeneralRe: Off Topic Pin
gardnerp9-Dec-13 9:03
Membergardnerp9-Dec-13 9:03 
GeneralRe: Off Topic Pin
gardnerp9-Dec-13 9:05
Membergardnerp9-Dec-13 9:05 
GeneralRe: Off Topic Pin
OriginalGriff9-Dec-13 9:15
mveOriginalGriff9-Dec-13 9:15 
Questionlayout changes Pin
Matiaan7-Apr-13 12:00
MemberMatiaan7-Apr-13 12:00 
Questionhow to change pixel size !!? Pin
shobeir,fatehi31-Jan-13 16:05
Membershobeir,fatehi31-Jan-13 16:05 
QuestionTouchend not working Pin
hensolberg2-Aug-12 0:22
Memberhensolberg2-Aug-12 0:22 
AnswerRe: Touchend not working Pin
gardnerp2-Aug-12 3:58
Membergardnerp2-Aug-12 3:58 
GeneralRe: Touchend not working Pin
Suresh koppisetty23-Apr-13 1:39
MemberSuresh koppisetty23-Apr-13 1:39 
GeneralMy vote of 3 Pin
Donsw30-Jun-12 5:15
MemberDonsw30-Jun-12 5:15 
nice article but other than just showing the code, for a better article you might what to explain something,
NewsA minor note - This wasn't meant to be an article! Pin
gardnerp30-Apr-12 5:35
Membergardnerp30-Apr-12 5:35 
QuestionWorks 50% of the time Pin
Dewey27-Apr-12 13:51
MemberDewey27-Apr-12 13:51 
AnswerRe: Works 50% of the time Pin
gardnerp30-Apr-12 2:36
Membergardnerp30-Apr-12 2:36 
GeneralRe: Works 50% of the time Pin
Dewey4-May-12 15:55
MemberDewey4-May-12 15:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.