如何将多个对象放在同一画布上？

Question

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.

<script>
  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();

</script>

Answer 1

you need to save the information about what you are drawing in a separate object, every time you make a draw to the canvas you will wipe and redraw the new object. so when you clearRect and then draw you are clearing and then drawing a fresh one but the old ones are being left behind. A good example:

var SavedCircles = [];
var circleInfo = function()
{
  this.x = 0;
  this.y = 0;
  this.startX = 0;
  this.startY = 0;
  this.radius = 0;
}
circle = {};

function draw()
{
   for(var x=0;x<SavedCircles.length;x++)
   {
       ctx.beginPath();
       ctx.arc(SavedCircles[x].X, SavedCircles[x].Y, SavedCircles[x].radius, 0, 2.0 * Math.PI);
       ctx.stroke();
   }
}

function mouseDown()
{
  circle = new circleInfo();
}

function mouseUp()
{
   SavedCircles.push(circle);
}

function mouseMove()
{
   draw();
}

so you can get rid of save and restore, also its much faster to clear a canvas simply by: canvas.width = canvas.width;

this should help you keep all circles ever drawn. fill in the rest with your code.