CODEWITHSUNDEEP
javascripthtmlcanvasdrawing
user2585578
user2585578

Reputation: 415

how can I put multiple objects on the same canvas?

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.

const canvas = document.getElementById("circle"),
   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();

Upvotes: 2

Views: 3232

Answers (1)

Gregory Guidero
Gregory Guidero

Reputation: 66

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.

Upvotes: 1

Related Questions