Question

note: i only want to move 1 shape at a time

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

This draws a circle, Notice the context variable is saved as an object property

i’ve written this function to move this existing circle using the original circles 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();
}

However this just draws yet ANOTHER circle.

How can i get it to move the existing?

WITHOUT CLEARING THE ORIGINAL AND DRAWING ANOTHER!

Answer 1

This is copied from another of my answers but the short answer is you can’t do that. What you could do is store the information in an object like so.

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

Then you can change any of the values and redraw it, you have to clear the canvas first, or at least that portion of the canvas you are redrawing to.

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

Live Demo