CODEWITHSUNDEEP
javascriptimagehtmlcanvas
dario111cro
dario111cro

Reputation: 805

html5 canvas image resize

How to resize image already drawed in canvas?

I tried this with no luck (image is showing, but it doesn't resize):

var drawBall = function(mouseX, mouseY){
    ballimg = new Image();
    ballimg.onload = function(){
        ctx.drawImage(ballimg, mouseX-25, mouseY-25);
        ballimg.height = 5;
        throwed = true;

    };
    ballimg.src = "ball2.png";
};

Upvotes: 2

Views: 1039

Answers (1)

1b0t
1b0t

Reputation: 432

You can not resize an object which is drawn on the canvas.

What you need to do is redraw your object.

clear the context where the old Ball is located ctx.clearRect(x,y,x2,y2) and draw a new Ball with the new size.

If you want to animate things on the canvas. The way you do that is to keep track of all your objects and redraw the canvas(every single object) for every frame.

Upvotes: 3

Related Questions