html5 canvas image resize

Question

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";
};

1b0t · Accepted Answer · 2012-03-07 16:32:52Z

3

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.

answered Mar 7, 2012 at 16:32

1b0t

4321 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dario111cro Over a year ago

How can I increase speed in redrawing?

1b0t Over a year ago

that depends on what you want to to. if your want to redraw every second or so you can use the setInterval function w3schools.com/jsref/met_win_setinterval.asp or you can manually trigger a redraw on mouseclick event or something

Jonathan Marzullo Over a year ago

also best to use requestAnimationFrame than setInterval for better performance. here is a polyfill made by paul irish ... paulirish.com/2011/requestanimationframe-for-smart-animating

Collectives™ on Stack Overflow

html5 canvas image resize

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related