Mouse pointer coordinates and canvas coordinates not matching
<p>I am trying to draw a line using canvas. While drawing a line my mouse pointer coordinates and canvas coordinates are mismatching. If I drag mouse at top of my canvas it draws a line at bottom. Can anyone identify what I am doing wrong here. I tried the below example. </p>

<p>Fiddle : <a href="https://jsfiddle.net/Shathiran/bpunb9dn/5/" rel="nofollow">https://jsfiddle.net/Shathiran/bpunb9dn/5/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false;
 
     var x = "black", y = 2;
     
     function init() {
         canvas = document.getElementById('drawCanvas');
         ctx = canvas.getContext("2d");
         w = ctx.clientWidth;
         h = ctx.clientHeight;
          
         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);
     }

     function draw() {
         ctx.beginPath();
         ctx.moveTo(prevX, prevY);
         ctx.lineTo(currX, currY);
         ctx.strokeStyle = x;
         ctx.lineWidth = y;
         ctx.stroke();
         ctx.closePath();
     }
     
     function findxy(res, e) {
         if (res == 'down') {
             prevX = currX;
             prevY = currY;
             currX = e.clientX - canvas.offsetLeft;
             currY = e.clientY - canvas.offsetTop;
     
             flag = true;
             dot_flag = true;
             if (dot_flag) {
                 ctx.beginPath();
                 ctx.fillStyle = x;
                 ctx.fillRect(currX, currY, 2, 2);
                 ctx.closePath();
                 dot_flag = false;
             }
         }
         if (res == 'up' || res == "out") {
             flag = false;
         }
         if (res == 'move') {
             if (flag) {
                 prevX = currX;
                 prevY = currY;
                 currX = e.clientX - canvas.offsetLeft;
                 currY = e.clientY - canvas.offsetTop;
                 draw();
             }
         }
     }
     init();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="paper"&gt;
    &lt;canvas id="drawCanvas" style="width:100%; height:100%;border: 1px solid #000"&gt;     &lt;/canvas&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>