title: Signature not getting display on Canvas element in html5
body: <p>I am trying to draw a signature on Canvas, but the signature is not getting displayed. I need the canvas to fit 100% width and the signature needs to appear without stretching. Here is the code.</p>
  
  <p>Here is my Code : </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile 1.1.1.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt; 
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css"  /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/index.css"  /&gt;
  &lt;div data-role="page"&gt;
  &lt;div id="divcontent" data-role="content"&gt;
  &lt;table border='0' width="100%" &gt;
      &lt;tr&gt;
          &lt;td style='background-color:blue'&gt;
          &lt;div id="sketch"&gt;
          &lt;canvas id="paint"  style='width:100%;height:90px;background-  color:yellow'&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Js: </p>
  
  <pre><code>&lt;script&gt;
    (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;
      //alert("call");
      console.log(mouse.x);
      mouse.x = e.pageX - this.offsetLeft-6;
      mouse.y = e.pageY - this.offsetTop-356;
      console.log("muse y:"+mouse.y);
  }, false);
  
  
  /* Drawing on Paint App */
  ctx.lineWidth = 5;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.strokeStyle = 'red';
  
  canvas.addEventListener('mousedown', function(e) {
      canvas.addEventListener('mousemove', onPaint, false);
  }, false);
  
  canvas.addEventListener('mouseup', function() {
      canvas.removeEventListener('mousemove', onPaint, false);
  }, false);
  
  var onPaint = function() {
  console.log("paint");
  console.log("last_mouse.x"+last_mouse.x);
  console.log("last_mouse.y"+last_mouse.y);
      ctx.beginPath();
  
      ctx.moveTo(last_mouse.x, last_mouse.y);
      ctx.lineTo(mouse.x, mouse.y);
      console.log("paint mouse.x"+mouse.x);
      console.log("paint mouse.y"+mouse.y);
      ctx.closePath();
      ctx.strokeStyle="red";
      ctx.stroke();
  };
  
   }());
  
   &lt;/script&gt;
  </code></pre>
  
  <p>How to fix this in order to draw a signature.</p>