title: html 5 canvas, I can only draw a single rectangle, how do i draw multiple rectangles and have them remain on the canvas
body: <p>Problem</p>
  
  <p>I can draw a single rectangle but when i click to draw another one the first rectangle disappears. I know why this is happening but want i want to do is be able to draw multiple rectangles and each rectangle to stay on the canvas as i draw it. Do i have to use multiple contexts?</p>
  
  <pre><code> var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
  
   var canvasx = $(canvas).offset().left;
   var canvasy = $(canvas).offset().top;
   var last_mousex = last_mousey = 0;
   var mousex = mousey = 0;
   var mousedown = false;
  
  
  $(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX-canvasx);
    last_mousey = parseInt(e.clientY-canvasy);
    mousedown = true;
  });
  
  
  $(canvas).on('mouseup', function(e) {
    mousedown = false;
  });
  
  
  $(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
        ctx.beginPath();
        var width = mousex-last_mousex;
        var height = mousey-last_mousey;
        ctx.rect(last_mousex,last_mousey,width,height);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 10;
        ctx.stroke();
  }
  </code></pre>
  
  <p>Here is a link to the jsfiddle</p>
  
  <p><a href="https://jsfiddle.net/richardcwc/ukqhf54k/" rel="nofollow noreferrer">https://jsfiddle.net/richardcwc/ukqhf54k/</a> </p>