title: Canvas tag doesn't work if CSS formatting is used
body: <p>I have created a simple web app using canvas HTML5 tag and JavaScript which allows to draw along the line mouse is moved while pressed. This works fine when I don't use any CSS formatting. However, when I use the CSS formatting, this doesn't work properly: the line is drawn far away from where the mouse is positioned.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>context = document.getElementById('drawing').getContext("2d");
  //below code to ensure compatibility with older browser by check if addEventListener is available or not
  var EventUtil = {
  addHandler: function(element, type, handler){ if (element.addEventListener){
              element.addEventListener(type, handler, false);
              } else if (element.attachEvent){
              element.attachEvent('on' + type, handler);
              } else {
              element['on' + type] = handler; }
              },
  
  removeHandler: function(element, type, handler){ if (element.removeEventListener){
              element.removeEventListener(type, handler, false);
              } else if (element.detachEvent){
              element.detachEvent('on' + type, handler);
              } else {
              element['on' + type] = null; }
              }
  } ;
  
  //Drawing canvas related functions
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;
  
  function addClick(x, y, dragging)
  {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
  }
  function whenMousedown () {
          var mouseX = event.pageX - this.offsetLeft;
          var mouseY = event.pageY - this.offsetTop;
           paint = true;
           addClick(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
           redraw();
  };
  function whenMousemove (){
          if(paint){
            addClick(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
            redraw();
          }
  };
  
  function whenMouseup(){
    paint = false;
  };
  function whenMouseleave(){
    paint = false;
  };
  
  function redraw(){
            context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
  
            context.strokeStyle = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;
  
            for(var i=0; i &lt; clickX.length; i++) {
              context.beginPath();
              if(clickDrag[i] &amp;&amp; i){
                context.moveTo(clickX[i-1], clickY[i-1]);
               }else{
                 context.moveTo(clickX[i]-1, clickY[i]);
               }
               context.lineTo(clickX[i], clickY[i]);
               context.closePath();
               context.stroke();
    }
  }
  // this clears the canvas and sets the arrays to null
  function clearCanvas() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height) // Clears the canvas
    clickX = [];
    clickY = [];
    clickDrag = [];
  };
  
  EventUtil.addHandler (document.getElementById('drawing'), 'mousedown', whenMousedown);
  EventUtil.addHandler (document.getElementById('drawing'), 'mousemove', whenMousemove);
  EventUtil.addHandler (document.getElementById('drawing'), 'mouseup', whenMouseup);
  EventUtil.addHandler (document.getElementById('drawing'), 'mouseleave', whenMouseleave);
  EventUtil.addHandler(document.getElementById('clearBtn'), 'click', clearCanvas) ;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
    margin: auto;
    width: 800px;
    height: 605px;
    border: 1px solid;
   }
  #body {
    margin: 10px;
   }
  .heading {
    margin: auto;
    width: 455px;
      color: blue;
      padding-bottom: 10px;
  }
  #drawing {
    width: 780px;
    height: 500px;
    border: 1px solid;
    margin: auto;
   }
  #clearBtnDiv{
      margin: auto;
      width:80px;
  }
  #clearBtn{
      color: purple;
      font-size: large;
      background-color: aqua;
      width: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt; Drawing Canvas&lt;/title&gt;
  &lt;link rel='stylesheet' type="text/css" href = 'drawingMain.css'&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id = 'container'&gt;
  &lt;div id='body'&gt;
   &lt;h1 class = 'heading'&gt; Welcome to a Drawing Canvas!!&lt;/h1&gt;
  &lt;canvas id ='drawing'  &gt;
   A sample drawing &lt;! this will be shown if canvas doesnt work in the browser !&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;div id ='clearBtnDiv'&gt;
   &lt;input type="submit" value="Clear" id ='clearBtn'  &gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src= 'drawing.js'&gt; &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>