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!

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!

• javascript
• html
• canvas

• 3 You can't, you need (for example) to have a canvas in memory which will be cleared, redrawn and copied to the visible canvas every frame. Check out - developer.mozilla/en/Canvas_tutorial/Basic_animations – Yaniro Commented Jun 13, 2012 at 11:15
• 1 Take a look at a canvas library like Fabric.js – kangax Commented Jun 13, 2012 at 11:37

1 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