title: Draw on canvas with vue
body: <p>I want to adapt a selection with rectangle (made with JS and html) in VueJs.
  I have this version:
  <a href="https://codepen.io/sebastiancz/pen/mdJVJRw" rel="nofollow noreferrer">https://codepen.io/sebastiancz/pen/mdJVJRw</a></p>
  
  <pre><code>initDraw(document.getElementById('canvas'));
  
  function initDraw(canvas) {
  
      function setMousePosition(e) {
          var ev = e || window.event; //Moz || IE
          if (ev.pageX) { //Moz
              mouse.x = ev.pageX + window.pageXOffset;
              mouse.y = ev.pageY + window.pageYOffset;
          } else if (ev.clientX) { //IE
              mouse.x = ev.clientX + document.body.scrollLeft;
              mouse.y = ev.clientY + document.body.scrollTop;
          }
      };
  
      var mouse = {
          x: 0,
          y: 0,
          startX: 0,
          startY: 0
      };
      var element = null;
  
      canvas.onmousemove = function (e) {
          setMousePosition(e);
          if (element !== null) {
              element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
              element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
              element.style.left = (mouse.x - mouse.startX &lt; 0) ? mouse.x + 'px' : mouse.startX + 'px';
            console.log(mouse.x, mouse.y)
              element.style.top = (mouse.y - mouse.startY &lt; 0) ? mouse.y + 'px' : mouse.startY + 'px';
          }
      }
  
      canvas.onmousedown = function (e) {
  
              console.log("Start.");
              mouse.startX = mouse.x;
              mouse.startY = mouse.y;
              element = document.createElement('div');
              element.className = 'rectangle'
              element.style.left = mouse.x + 'px';
              element.style.top = mouse.y + 'px';
              canvas.appendChild(element)
          }
    canvas.onmouseup = function (e) {
              element = null;
      // canvas.ctx.clearRect();
              console.log("finsihed.");
  
    }
  
  }
  
  </code></pre>
  
  <p>and this is my non working version version in vue :
  <a href="https://codepen.io/sebastiancz/pen/mdJPvOP?editors=0011" rel="nofollow noreferrer">https://codepen.io/sebastiancz/pen/mdJPvOP?editors=0011</a></p>
  
  <p>How can I fix this ?</p>