jQuery-Canvas

by I Sang Hyeon

HTML

<div>

<h1>Canvas test</h1>
 
   	<div>
		<img id="myImage3">
  	</div>

 
   <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="300px" height="300px" style="border:2px solid #000000;"></canvas>
   </div>

<br>
<button onclick="clearCanvas();">Clear=></button>     
<br>
<button onclick="toDataURL();">Image=></button>     
<br>
<span id="myImage2"></span>
<img id="myImage">
.....
<br>
<button onclick="fromDataURL();">Canvas Copy=></button>                  
<br>
<canvas id="copyCanvas" width="300" height="300" style=" position: relative; border: 1px solid #000;"></canvas>
...


</div>

JavaScript

var sigCanvas, context;
      $(document).ready(function () {
         initialize();
      });
 

      // 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
         sigCanvas = document.getElementById("canvasSignature");
         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.beginPath();
                  context.moveTo(coors.x, coors.y);
                  this.isDrawing = true;
               },
               touchmove: function (coors) {
                  if (this.isDrawing) {
                     context.lineTo(coors.x, coors.y);
                     context.stroke();
                  }
               },
               touchend: function (coors) {
                  if (this.isDrawing) {
                     this.touchmove(coors);
                     this.isDrawing = false;
                  }
               }
            };
 
            // create a function to pass...