Is it possible to move already drawn shapes on the html5 canvas?

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!

Answers


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


Need Your Help

Parsing XML response in VBA

excel vba excel-vba

I am calling a webservice from Excel macro but not able to parse the response XML. The Structure of the Response is as follows -

Convert HTML to PDF in ASP.NET MVC

asp.net-mvc pdf-conversion

Im working in a project which requires current html page to convert in pdf and that pdf will automatically save on button click on server and its reference will be save in database.I can convert...