Можно ли переместить уже нарисованные фигуры на холст html5?

Question

примечание: я только хочу, чтобы переместить 1 форму в то время

Circle.prototype.create = function(){ 
    if (this.canvas === null){ 
     throw "Circle has no canvas"; 
    } 
    if (this.canvas.getContext){ 
     this.context = this.canvas.getContext("2d"); 
     this.context.fillStyle = this.color; 
     this.context.beginPath(); 
     this.context.arc(this.x,this.y,this.r,0,Math.PI*2); 
     this.context.closePath(); 
     this.context.fill(); 
    } 
} 

Это рисует круг, Обратите внимание, что переменная context сохраняется как свойство объекта

я написал эту функцию, чтобы переместить этот существующий круг с использованием оригинальных кругов context

Circle.prototype.move_to = function(x,y){ 
    if (this.context === null){ 
     throw "Circle has no context to move"; 
    } 
    this.x = x; this.y = y; 
    this.context.translate(x, y); 
    this.context.beginPath(); 
    this.context.arc(this.x,this.y,this.r,0,Math.PI*2); 
    this.context.closePath(); 
    this.context.fill(); 
} 

Однако это только привлекает еще один круг.

Как я могу заставить его перемещать существующие?

БЕЗ ОЧИСТКИ ОРИГИНАЛ И ЧЕРТЕЖ ДРУГОГО!

Answer 1

Это копируется из другого ответа, но короткий ответ заключается в том, что вы не можете этого сделать. Что вы можете сделать, так это хранить информацию в объекте.

var rectangle = {x:10,y:20,width:20,height:40}; 

Тогда вы можете изменить любое из значений и перерисовывать, вы должны очистить холст первым, или, по меньшей мере, часть холста вы перерисовки к.

//clear the canvas then draw 
rectangle.width = 60; 
ctx.fillRect(rectangle.x,rectangle.y,rectangle.width,rectangle.height); 

Live Demo