title: how can I put multiple objects on the same canvas?
body: <p>i'm creating a web page where you dynamically draw multiple rectangles. I can draw  the single object, but once I tried to draw another one, the previous one is gone away. I tried to save the state using save() and restore(), and it seems that I can't put it here. Isn't it logical that save method is put in the mouseup and restore method is called in the mousedown event? Any help or advice will be appreciated.</p>
  
  <pre><code>&lt;script&gt;
    var canvas = document.getElementById('myCanvasCircle'),
        ctx = canvas.getContext('2d'),
        circle = {},
        drag = false,
        circleMade = false,
        mouseMoved = false;
  
    function draw() {
      ctx.beginPath();
      ctx.arc(circle.X, circle.Y, circle.radius, 0, 2.0 * Math.PI);
      ctx.stroke();
  
    }
  
    function mouseDown(e) {
      ctx.restore();
      circle.startX = e.pageX - this.offsetLeft;
      circle.startY = e.pageY - this.offsetTop;
  
      circle.X = circle.startX;
      circle.Y = circle.startY;
  
      if (!circleMade) {
        circle.radius = 0;
      }
  
      drag = true;
    }
  
    function mouseUp() {
      drag = false;
      circleMade = true;
  
      if (!mouseMoved) {
        circle = {};
        circleMade = false;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
  
      mouseMoved = false;
      ctx.save();
    }
  
    function mouseMove(e) {
      if (drag) {
        mouseMoved = true;
        circle.X = e.pageX - this.offsetLeft;
        circle.Y = e.pageY - this.offsetTop;
        if (!circleMade) {
          circle.radius = Math.sqrt(Math.pow((circle.X - circle.startX), 2) + Math.pow((circle.Y - circle.startY), 2));
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        draw();
  
  
      }
    }
  
    function init() {
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
  
    }
  
    init();
  
  &lt;/script&gt;
  </code></pre>