title: canvas - how to select multi rectangle area on image?
body: <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 = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var rect = {};
  var drag = false;
  make_base();
  init();
  
  
  function make_base() {
    base_image = new Image();
    base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
    base_image.onload = function() {
      context.drawImage(base_image, 0, 0, 800, 500);
    }
  }
  
  function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(base_image, 0, 0, 800, 500);
    context.font = '12pt Calibri';
    context.fillStyle = 'red';
    context.fillText(message, 25, 25);
  }
  
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  
  function init() {
  
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
  }
  
  function mouseDown(e) {
      rect.startX = e.pageX - this.offsetLeft;
      rect.startY = e.pageY - this.offsetTop;
      drag = true;
  }
  
  function mouseUp() {
      drag = false;
  }
  
  function mouseMove(e) {
      if(drag) {
          rect.w = (e.pageX - this.offsetLeft) - rect.startX;
          rect.h = (e.pageY - this.offsetTop) - rect.startY ;
          context.clearRect(rect.startX, rect.startY, rect.w, rect.h);
          draw();
      }
  }
  
  function draw() {
      context.lineWidth="1";
      context.strokeStyle = "blue";
      context.beginPath();
      context.rect(rect.startX, rect.startY, rect.w, rect.h);
      context.stroke();
      context.closePath();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;"&gt;
      &lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I can draw multi rectangle on image using mouse.
  However, it will be white?</p>
  
  <p>How to draw a rectangle more like select a area?</p>