Draw on HTML5 Canvas using a mouse

Question

I want to draw on a HTML Canvas using a mouse  for example  draw a signature  draw a name       How would I go about implementing this

User · Accepted Answer

Here is a working sample    x000D   x000D    lt html gt  x000D       lt script type  text javascript  gt  x000D      var canvas  ctx  flag   false  x000D          prevX   0  x000D          currX   0  x000D          prevY   0  x000D          currY   0  x000D          dot flag   false  x000D   x000D      var x    black   x000D          y   2  x000D       x000D      function init     x000D          canvas   document getElementById  can    x000D          ctx   canvas getContext  2d    x000D          w   canvas width  x000D          h   canvas height  x000D       x000D          canvas addEventListener  mousemove   function  e    x000D              findxy  move   e  x000D             false   x000D          canvas addEventListener  mousedown   function  e    x000D              findxy  down   e  x000D             false   x000D          canvas addEventListener  mouseup   function  e    x000D              findxy  up   e  x000D             false   x000D          canvas addEventListener  mouseout   function  e    x000D              findxy  out   e  x000D             false   x000D        x000D       x000D      function color obj    x000D          switch  obj id    x000D              case  green   x000D                  x    green   x000D                  break  x000D              case  blue   x000D                  x    blue   x000D                  break  x000D              case  red   x000D                  x    red   x000D                  break  x000D              case  yellow   x000D                  x    yellow   x000D                  break  x000D              case  orange   x000D                  x    orange   x000D                  break  x000D              case  black   x000D                  x    black   x000D                  break  x000D              case  white   x000D                  x    white   x000D                  break  x000D            x000D          if  x     white   y   14  x000D          else y   2  x000D       x000D        x000D       x000D      function draw     x000D          ctx beginPath    x000D          ctx moveTo prevX  prevY   x000D          ctx lineTo currX  currY   x000D          ctx strokeStyle   x  x000D          ctx lineWidth   y  x000D          ctx stroke    x000D          ctx closePath    x000D        x000D       x000D      function erase     x000D          var m   confirm  Want to clear    x000D          if  m    x000D              ctx clearRect 0  0  w  h   x000D              document getElementById  canvasimg   style display    none   x000D            x000D        x000D       x000D      function save     x000D          document getElementById  canvasimg   style border    2px solid   x000D          var dataURL   canvas toDataURL    x000D          document getElementById  canvasimg   src   dataURL  x000D          document getElementById  canvasimg   style display    inline   x000D        x000D       x000D      function findxy res  e    x000D          if  res     down     x000D              prevX   currX  x000D              prevY   currY  x000D              currX   e clientX - canvas offsetLeft  x000D              currY   e clientY - canvas offsetTop  x000D       x000D              flag   true  x000D              dot flag   true  x000D              if  dot flag    x000D                  ctx beginPath    x000D                  ctx fillStyle   x  x000D                  ctx fillRect currX  currY  2  2   x000D                  ctx closePath    x000D                  dot flag   false  x000D                x000D            x000D          if  res     up     res     out     x000D              flag   false  x000D            x000D          if  res     move     x000D              if  flag    x000D                  prevX   currX  x000D                  prevY   currY  x000D                  currX   e clientX - canvas offsetLeft  x000D                  currY   e clientY - canvas offsetTop  x000D                  draw    x000D                x000D            x000D        x000D       lt  script gt  x000D       lt body onload  init    gt  x000D           lt canvas id  can  width  400  height  400  style  position absolute top 10  left 10  border 2px solid   gt  lt  canvas gt  x000D           lt div style  position absolute top 12  left 43    gt Choose Color lt  div gt  x000D           lt div style  position absolute top 15  left 45  width 10px height 10px background green   id  green  onclick  color this   gt  lt  div gt  x000D           lt div style  position absolute top 15  left 46  width 10px height 10px background blue   id  blue  onclick  color this   gt  lt  div gt  x000D           lt div style  position absolute top 15  left 47  width 10px height 10px background red   id  red  onclick  color this   gt  lt  div gt  x000D           lt div style  position absolute top 17  left 45  width 10px height 10px background yellow   id  yellow  onclick  color this   gt  lt  div gt  x000D           lt div style  position absolute top 17  left 46  width 10px height 10px background orange   id  orange  onclick  color this   gt  lt  div gt  x000D           lt div style  position absolute top 17  left 47  width 10px height 10px background black   id  black  onclick  color this   gt  lt  div gt  x000D           lt div style  position absolute top 20  left 43    gt Eraser lt  div gt  x000D           lt div style  position absolute top 22  left 45  width 15px height 15px background white border 2px solid   id  white  onclick  color this   gt  lt  div gt  x000D           lt img id  canvasimg  style  position absolute top 10  left 52    style  display none   gt  x000D           lt input type  button  value  save  id  btn  size  30  onclick  save    style  position absolute top 55  left 10    gt  x000D           lt input type  button  value  clear  id  clr  size  23  onclick  erase    style  position absolute top 55  left 15    gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

A super short version  here  without position absolute in vanilla JavaScript  The main idea is to move the canvas  context to the right coordinates and draw a line  Uncomment click handler and comment mousedown  amp  mousemove handlers below to get a feel for how it is working     lt  DOCTYPE html gt   lt html gt   lt body gt    lt p style  margin  50px  gt Just some padding in y direction lt  p gt    lt canvas id  myCanvas  width  300  height  300  style  background   000  margin-left  100px   gt Your browser does not support the HTML5 canvas tag  lt  canvas gt    lt script gt      const c   document getElementById  myCanvas           c addEventListener  click   penTool      fires after mouse left btn is released     c addEventListener  mousedown   setLastCoords      fires before mouse left btn is released     c addEventListener  mousemove   freeForm         const ctx   c getContext  2d         function setLastCoords e            const  x  y    c getBoundingClientRect            lastX   e clientX - x          lastY   e clientY - y             function freeForm e            if  e buttons     1  return     left button is not pushed yet         penTool e              function penTool e            const  x  y    c getBoundingClientRect            const newX   e clientX - x          const newY   e clientY - y           ctx beginPath            ctx lineWidth   5          ctx moveTo lastX  lastY           ctx lineTo newX  newY           ctx strokeStyle    white           ctx stroke            ctx closePath             lastX   newX          lastY   newY             let lastX   0      let lastY   0     lt  script gt    lt  body gt   lt  html gt

User · Answer

check this http   jsfiddle net ArtBIT kneDX   This should direct you on the right direction

User · Answer

Let me know if you have trouble implementing this  It uses processing js and has features for changing colors and making the draw point larger and smaller       lt html gt   lt head gt   lt  --script librarires-- gt   lt script type  text javascript  src  processing js  gt  lt  script gt   lt script type  text javascript  src  init js  gt  lt  script gt    lt  --styles -- gt   lt style type  text css  src  stylesheet css  gt   lt  style gt    lt  head gt   lt body gt   lt  --toolbox -- gt   lt div id  draggable toolbox  gt  lt  div gt   lt script type  application processing  gt     new script int prevx  prevy  int newx  newy  boolean cliked  color c1    000000  int largeur 2  int ps   20  int px   50  int py   50   void setup     size 500 500   frameRate 25   background 50     prevx   mouseX   prevy   mouseY   cliked   false      void draw        couleur  noStroke 0    fill  FFFFFF    blanc rect px  py  ps  ps    fill  000000    rect px  py  ps   ps  ps    fill  FF0000    rect px  py  ps 2   ps  ps    fill  00FF00    rect px  py  ps 3   ps  ps    fill  FFFF00    rect px  py  ps 4   ps  ps    fill  0000FF    rect px  py  ps 5   ps  ps      largeur  fill  FFFFFF    rect px  py  ps 7   ps  ps     fill  FFFFFF    rect px  py  ps 8   ps  ps    stroke  000000    line px 2  py  ps 7   ps 2   px  ps-2   py  ps 7   ps 2     line px  ps 2   py  ps 7  1  px  ps 2   py  ps 8 -1    line px 2  py  ps 8   ps 2   px  ps-2   py  ps 8   ps 2      if cliked  false     prevx   mouseX   prevy   mouseY        if mousePressed       cliked   true   newx   mouseX    newy   mouseY    strokeWeight largeur     stroke c1     line prevx  prevy  newx  newy     prevx   newx   prevy   newy    else    cliked  false        void mouseClicked      if  mouseX gt  px  amp  amp  mouseX lt   px ps        couleur   if  mouseY gt  py  amp  amp  mouseY lt  py  ps 6        c1   get mouseX  mouseY            largeur   if  mouseY gt  py  ps 7   amp  amp  mouseY lt  py  ps 8        largeur    2       if  mouseY gt  py  ps 8   amp  amp  mouseY lt  py  ps 9        if  largeur gt 2       largeur -  2                 lt  script gt  lt canvas gt  lt  canvas gt   lt  body gt   lt  html gt

User · Answer

I had to provide a simple example for this subject so I ll share here   http   jsfiddle net Haelle v6tfp2e1   x000D   x000D  class SignTool   x000D    constructor     x000D      this initVars   x000D      this initEvents   x000D      x000D   x000D    initVars     x000D      this canvas       canvas   0  x000D      this ctx   this canvas getContext  2d   x000D      this isMouseClicked   false x000D      this isMouseInCanvas   false x000D      this prevX   0 x000D      this currX   0 x000D      this prevY   0 x000D      this currY   0 x000D      x000D   x000D    initEvents     x000D          canvas   on  mousemove    e    gt  this onMouseMove e   x000D          canvas   on  mousedown    e    gt  this onMouseDown e   x000D          canvas   on  mouseup        gt  this onMouseUp    x000D          canvas   on  mouseout        gt  this onMouseOut    x000D          canvas   on  mouseenter    e    gt  this onMouseEnter e   x000D      x000D     x000D    onMouseDown e    x000D     this isMouseClicked   true x000D      this updateCurrentPosition e  x000D      x000D     x000D    onMouseUp     x000D     this isMouseClicked   false x000D      x000D     x000D    onMouseEnter e    x000D     this isMouseInCanvas   true x000D      this updateCurrentPosition e  x000D      x000D     x000D    onMouseOut     x000D     this isMouseInCanvas   false x000D      x000D   x000D    onMouseMove e    x000D      if  this isMouseClicked  amp  amp  this isMouseInCanvas    x000D       this updateCurrentPosition e  x000D        this draw   x000D        x000D      x000D     x000D    updateCurrentPosition e    x000D        this prevX   this currX x000D        this prevY   this currY x000D        this currX   e clientX - this canvas offsetLeft x000D        this currY   e clientY - this canvas offsetTop x000D      x000D     x000D    draw     x000D      this ctx beginPath   x000D      this ctx moveTo this prevX  this prevY  x000D      this ctx lineTo this currX  this currY  x000D      this ctx strokeStyle    black  x000D      this ctx lineWidth   2 x000D      this ctx stroke   x000D      this ctx closePath   x000D      x000D    x000D   x000D  var canvas   new SignTool   x000D  canvas   x000D    position  absolute  x000D    border  2px solid  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt canvas id  canvas  width  500  height  300  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

Alco check this one  Example  https   github com williammalone Simple-HTML5-Drawing-App  Documentation  http   www williammalone com articles create-html5-canvas-javascript-drawing-app     This document includes following codes -    HTML    lt canvas id  canvas  width  490  height  220  gt  lt  canvas gt    JS   context   document getElementById  canvas   getContext  2d         canvas   mousedown function e     var mouseX   e pageX - this offsetLeft    var mouseY   e pageY - this offsetTop     paint   true    addClick e pageX - this offsetLeft  e pageY - this offsetTop     redraw             canvas   mouseup function e     paint   false           canvas   mouseleave function e     paint   false       var clickX   new Array    var clickY   new Array    var clickDrag   new Array    var paint   function addClick x  y  dragging      clickX push x     clickY push y     clickDrag push dragging        Also redraw function redraw      context clearRect 0  0  context canvas width  context canvas height      Clears the canvas    context strokeStyle     df4b26     context lineJoin    round     context lineWidth   5     for var i 0  i  lt  clickX length  i                  context beginPath        if clickDrag i   amp  amp  i         context moveTo clickX i-1   clickY i-1          else         context moveTo clickX i -1  clickY i                context lineTo clickX i   clickY i         context closePath         context stroke            And another awesome example http   perfectionkills com exploring-canvas-drawing-techniques

User · Answer

if you have background image for your canvas  you will have to make some tweaks to have it work properly because white erasing trick will hide the background   here is a gist with the code    lt html gt       lt script type  text javascript  gt      var canvas  canvasimg  backgroundImage  finalImg      var mouseClicked   false      var prevX   0      var currX   0      var prevY   0      var currY   0      var fillStyle    black       var globalCompositeOperation    source-over       var lineWidth   2       function init           var imageSrc     abstract-geometric-pattern 23-2147508597 jpg        backgroundImage   new Image          backgroundImage src   imageSrc        canvas   document getElementById  can          finalImg   document getElementById  finalImg          canvasimg   document getElementById  canvasimg          canvas style backgroundImage    url      imageSrc               canvas addEventListener  mousemove   handleMouseEvent         canvas addEventListener  mousedown   handleMouseEvent         canvas addEventListener  mouseup   handleMouseEvent         canvas addEventListener  mouseout   handleMouseEvent              function getColor btn          globalCompositeOperation    source-over         lineWidth   2        switch  btn getAttribute  data-color              case  green           fillStyle    green           break          case  blue           fillStyle    blue           break          case  red           fillStyle    red           break          case  yellow           fillStyle    yellow           break          case  orange           fillStyle    orange           break          case  black           fillStyle    black           break          case  eraser           globalCompositeOperation    destination-out           fillStyle    rgba 0 0 0 1            lineWidth   14          break                      function draw dot          var ctx   canvas getContext  2d          ctx beginPath          ctx globalCompositeOperation   globalCompositeOperation        if dot           ctx fillStyle   fillStyle          ctx fillRect currX  currY  2  2           else           ctx beginPath            ctx moveTo prevX  prevY           ctx lineTo currX  currY           ctx strokeStyle   fillStyle          ctx lineWidth   lineWidth          ctx stroke                  ctx closePath               function erase           if  confirm  Want to clear              var ctx   canvas getContext  2d            ctx clearRect 0  0  canvas width  canvas height           document getElementById  canvasimg   style display    none                      function save           canvas style border    2px solid         canvasimg width   canvas width        canvasimg height   canvas height        var ctx2   canvasimg getContext  2d             comment next line to save the draw only       ctx2 drawImage backgroundImage  0  0         ctx2 drawImage canvas  0  0         finalImg src   canvasimg toDataURL          finalImg style display    inline              function handleMouseEvent e          if  e type      mousedown             prevX   currX          prevY   currY          currX   e offsetX          currY   e offsetY          mouseClicked   true          draw true                 if  e type      mouseup     e type      mouseout             mouseClicked   false                if  e type      mousemove             if  mouseClicked              prevX   currX            prevY   currY            currX   e offsetX            currY   e offsetY            draw                                 lt  script gt       lt body onload  init    gt         lt canvas id  can  width  400  height  400  style  position absolute top 10  left 10  border 2px solid   gt         lt  canvas gt         lt div style  position absolute top 12  left 43    gt Choose Color lt  div gt         lt div style  position absolute top 15  left 45  width 10px height 10px background green   data-color  green  onclick  getColor this   gt  lt  div gt         lt div style  position absolute top 15  left 46  width 10px height 10px background blue   data-color  blue  onclick  getColor this   gt  lt  div gt         lt div style  position absolute top 15  left 47  width 10px height 10px background red   data-color  red  onclick  getColor this   gt  lt  div gt         lt div style  position absolute top 17  left 45  width 10px height 10px background yellow   data-color  yellow  onclick  getColor this   gt  lt  div gt         lt div style  position absolute top 17  left 46  width 10px height 10px background orange   data-color  orange  onclick  getColor this   gt  lt  div gt         lt div style  position absolute top 17  left 47  width 10px height 10px background black   data-color  black  onclick  getColor this   gt  lt  div gt         lt div style  position absolute top 20  left 43    gt Eraser lt  div gt         lt div style  position absolute top 22  left 45  width 15px height 15px background white border 2px solid   data-color  eraser  onclick  getColor this   gt  lt  div gt         lt canvas id  canvasimg  style  display none    gt  lt  canvas gt         lt img id  finalImg  style  position absolute top 10  left 52  display none    gt         lt input type  button  value  save  id  btn  size  30  onclick  save    style  position absolute top 55  left 10    gt         lt input type  button  value  clear  id  clr  size  23  onclick  erase    style  position absolute top 55  left 15    gt       lt  body gt       lt  html gt

User · Answer

I was looking to use this method for signatures as well  i found a sample on http   codetheory in    I ve added the below code to a jsfiddle  Html    lt div id  sketch  gt       lt canvas id  paint  gt  lt  canvas gt   lt  div gt    Javascript     function         var canvas   document querySelector   paint        var ctx   canvas getContext  2d         var sketch   document querySelector   sketch        var sketch style   getComputedStyle sketch       canvas width   parseInt sketch style getPropertyValue  width         canvas height   parseInt sketch style getPropertyValue  height          var mouse    x  0  y  0       var last mouse    x  0  y  0           Mouse Capturing Work        canvas addEventListener  mousemove   function e            last mouse x   mouse x          last mouse y   mouse y           mouse x   e pageX - this offsetLeft          mouse y   e pageY - this offsetTop         false            Drawing on Paint App        ctx lineWidth   5      ctx lineJoin    round       ctx lineCap    round       ctx strokeStyle    blue        canvas addEventListener  mousedown   function e            canvas addEventListener  mousemove   onPaint  false          false        canvas addEventListener  mouseup   function             canvas removeEventListener  mousemove   onPaint  false          false        var onPaint   function             ctx beginPath            ctx moveTo last mouse x  last mouse y           ctx lineTo mouse x  mouse y           ctx closePath            ctx stroke

User · Answer

Googled this   html5 canvas paint program    Looks like what you need   http   dev opera com articles view html5-canvas-painting

User · Answer

Here is my very simple working canvas draw and erase   https   jsfiddle net richardcwc d2gxjdva    x000D   x000D    Canvas x000D  var canvas   document getElementById  canvas    x000D  var ctx   canvas getContext  2d    x000D    Variables x000D  var canvasx     canvas  offset   left  x000D  var canvasy     canvas  offset   top  x000D  var last mousex   last mousey   0  x000D  var mousex   mousey   0  x000D  var mousedown   false  x000D  var tooltype    draw   x000D   x000D    Mousedown x000D    canvas  on  mousedown   function e    x000D      last mousex   mousex   parseInt e clientX-canvasx   x000D   last mousey   mousey   parseInt e clientY-canvasy   x000D      mousedown   true  x000D      x000D   x000D    Mouseup x000D    canvas  on  mouseup   function e    x000D      mousedown   false  x000D      x000D   x000D    Mousemove x000D    canvas  on  mousemove   function e    x000D      mousex   parseInt e clientX-canvasx   x000D      mousey   parseInt e clientY-canvasy   x000D      if mousedown    x000D          ctx beginPath    x000D          if tooltype   draw     x000D              ctx globalCompositeOperation    source-over   x000D              ctx strokeStyle    black   x000D              ctx lineWidth   3  x000D            else   x000D              ctx globalCompositeOperation    destination-out   x000D              ctx lineWidth   10  x000D            x000D          ctx moveTo last mousex last mousey   x000D          ctx lineTo mousex mousey   x000D          ctx lineJoin   ctx lineCap    round   x000D          ctx stroke    x000D        x000D      last mousex   mousex  x000D      last mousey   mousey  x000D        Output x000D          output   html  current    mousex      mousey   lt br  gt last    last mousex      last mousey   lt br  gt mousedown    mousedown   x000D      x000D   x000D    Use draw erase x000D  use tool   function tool    x000D      tooltype   tool    update x000D    x000D  canvas   x000D      cursor  crosshair  x000D      border  1px solid  000000  x000D    x000D   lt canvas id  canvas  width  800  height  500  gt  lt  canvas gt  x000D   lt input type  button  value  draw  onclick  use tool  draw       gt  x000D   lt input type  button  value  erase  onclick  use tool  erase       gt  x000D   lt div id  output  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here s the most straightforward way to create a drawing application with canvas    Attach a mousedown  mousemove  and mouseup event listener to the canvas DOM on mousedown  get the mouse coordinates  and use the moveTo   method to position your drawing cursor and the beginPath   method to begin a new drawing path  on mousemove  continuously add a new point to the path with lineTo    and color the last segment with stroke    on mouseup  set a flag to disable the drawing    From there  you can add all kinds of other features like giving the user the ability to choose a line thickness  color  brush strokes  and even layers

User · Answer

It s been years since the question was asked and was answered   For anyone who looks for a simple drawing canvas  eg  for taking the signature from the user customer   here I am posting a more simplified jquery version of the currently accepted answer   x000D   x000D    document  ready function     x000D    var flag  dot flag   false  x000D   prevX  prevY  currX  currY   0  x000D   color    black   thickness   2  x000D    var  canvas       canvas    x000D    var ctx    canvas 0  getContext  2d    x000D   x000D     canvas on  mousemove mousedown mouseup mouseout   function e    x000D      prevX   currX  x000D      prevY   currY  x000D      currX   e clientX -  canvas offset   left  x000D      currY   e clientY -  canvas offset   top  x000D      if  e type     mousedown     x000D        flag   true  x000D        x000D      if  e type     mouseup     e type     mouseout     x000D        flag   false  x000D        x000D      if  e type     mousemove     x000D        if  flag    x000D          ctx beginPath    x000D          ctx moveTo prevX  prevY   x000D          ctx lineTo currX  currY   x000D          ctx strokeStyle   color  x000D          ctx lineWidth   thickness  x000D          ctx stroke    x000D          ctx closePath    x000D          x000D        x000D        x000D   x000D        canvas-clear   on  click   function e    x000D      c width    canvas width    x000D      c height    canvas height    x000D      ctx clearRect 0  0  c width  c height   x000D          canvasimg   hide    x000D        x000D      x000D   lt html gt  x000D     lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 0 jquery min js  gt  lt  script gt  x000D     lt body gt  x000D       lt canvas id  canvas  width  400  height  400  style  position absolute top 10  left 10  border 2px solid   gt  lt  canvas gt  x000D       lt input type  button  value  Clear  class  canvas-clear    gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I think  other examples here are too complicated  This one is simpler and JS only      x000D   x000D     create canvas element and append it to document body x000D  var canvas   document createElement  canvas    x000D  document body appendChild canvas   x000D   x000D     some hotfixes           x000D  document body style margin   0  x000D  canvas style position    fixed   x000D   x000D     get canvas 2D context and set him correct size x000D  var ctx   canvas getContext  2d    x000D  resize    x000D   x000D     last known position x000D  var pos     x  0  y  0    x000D   x000D  window addEventListener  resize   resize   x000D  document addEventListener  mousemove   draw   x000D  document addEventListener  mousedown   setPosition   x000D  document addEventListener  mouseenter   setPosition   x000D   x000D     new position from mouse event x000D  function setPosition e    x000D    pos x   e clientX  x000D    pos y   e clientY  x000D    x000D   x000D     resize canvas x000D  function resize     x000D    ctx canvas width   window innerWidth  x000D    ctx canvas height   window innerHeight  x000D    x000D   x000D  function draw e    x000D       mouse left button must be pressed x000D    if  e buttons     1  return  x000D   x000D    ctx beginPath       begin x000D   x000D    ctx lineWidth   5  x000D    ctx lineCap    round   x000D    ctx strokeStyle     c0392b   x000D   x000D    ctx moveTo pos x  pos y      from x000D    setPosition e   x000D    ctx lineTo pos x  pos y      to x000D   x000D    ctx stroke       draw it  x000D    x000D   x000D   x000D

[html] Draw on HTML5 Canvas using a mouse

Examples related to html

Examples related to canvas

Examples related to gesture

Examples related to gesture-recognition