title: Get Canvas X and Y coordinates and show on screen
body: <p>I'm currently learning canvas touch event function,I 'm able to draw line on the canvas, now I want to get the x and y coordinates when I draw any lines and show on the screen.please help and teach me how to get the x and y values, thank You! </p>
  
  <p>here is the coding</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;style&gt;
  #contain {
  width: 500px;
  height: 120px;
  top : 15px;
  margin: 0 auto;
  position: relative;    
  }
  &lt;/style&gt;
  &lt;script&gt;
        var canvas;
        var ctx;
        var lastPt=null;
        var letsdraw = false;
        var offX = 10, offY = 20;
  
  
      function init() {
          var touchzone = document.getElementById("layer1");
          touchzone.addEventListener("touchmove", draw, false);
          touchzone.addEventListener("touchend", end, false);
          ctx = touchzone.getContext("2d");
        }
  
        function draw(e) {
          e.preventDefault();
          if (lastPt != null) {
          ctx.beginPath();
          ctx.moveTo(lastPt.x, lastPt.y);
          ctx.lineTo(e.touches[0].pageX - offX,
                   e.touches[0].pageY - offY);
          ctx.stroke();
    }
    lastPt = {
        x: e.touches[0].pageX - offX,
        y: e.touches[0].pageY - offY
     };
   }
  
    function end(e) {
     var touchzone = document.getElementById("layer1");
     e.preventDefault();
      // Terminate touch path
      lastPt = null;
     }
  
      function clear_canvas_width ()
          {
              var s = document.getElementById ("layer1");
              var w = s.width;
              s.width = 10;
              s.width = w;
          }
      &lt;/script&gt;    
  &lt;/head&gt;
  
  &lt;body onload="init()"&gt;
  
  &lt;div id="contain"&gt;
  &lt;canvas id="layer1" width="450" height="440" 
     style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"&gt;&lt;/canvas&gt; 
  &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>