Canvas image

Canvas image

by Karen Maritz

HTML

<div id="dialogSignature" runat="server" align="left" style="padding-top:10px; display:block; ">
  <canvas id="myCanvas" width="400" height="800" style="border:2px solid;" runat="server"></canvas>
  <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">

  <table>
    <tr>
      <td colspan="2">
        <asp:Label ID="lblSignDetailsRequired" runat="server" Text="" ForeColor="Red" Font-Size="10pt"></asp:Label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="Clear" id="clr" size="23" onclick="erase()" class="myButton">
      </td>
      <td>
        <button class="myButton" onclick="javascript:UploadPic();return false;">Sumbit</button>
        <asp:Button ID="btnSubmitSignature" OnClientClick="javascript:UploadPic();return false;" CssClass="myButton" runat="server" Text="Submit" />
      </td>
    </tr>
  </table>
</div>

JavaScript

var canvas, ctx, flag = false,
  prevX = 0,
  currX = 0,
  prevY = 0,
  currY = 0,
  dot_flag = false;

var x = "black",
  y = 2;

canvas = document.getElementById('myCanvas');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;

canvas.addEventListener("mousemove", function(e) {
  findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function(e) {
  findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function(e) {
  findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function(e) {
  findxy('out', e)
}, false);

canvas.addEventListener("touchstart", function(e) {
  mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousedown", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function(e) {
  var mouseEvent = new MouseEvent("mouseup", {});
  canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function(e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);

// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function(e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function(e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function(e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);



function  getTouchPos(canvas, evt) {
  var rect = canvas.getBoundingClientRect(), // abs. size of element
      scaleX = canvas.width / rect.width,    // relationship bitmap vs. element for X
      scaleY = canvas.height / rect.height;  // relationship bitmap vs. element for Y

  return {
    x: (evt.clientX - rect.left) * scaleX,   // scale...