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="200" 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(canvasDom, touchEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}

function color(obj) {
  switch (obj.id) {
    case "green":
      x = "green";
      break;
    case "blue":
      x = "blue";
     ...