Question

I’m trying to draw a timer in a canvas game using an image which I want to crop from the top to show time counting down.

I know I need to use this:

          ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

But I just can’t get my head around it, I’ve been looking at a few sites but their explanation doesn’t seem to register with me.

The below sorta works to reduce height, as I have a variable counting down to reduce the height, I just need to use that to crop the height instead of reduce it:

            ctx.drawImage(img,0,0,80,heightVar);

Can anyone please tell me how to draw this image at 0,0, it’s width is 80px and height 480px?

Answer 1

If I’m understanding you right, you’ll want to do something like this:

ctx.drawImage(img, 0, 480 - heightVar, 80, heightVar,
                   0, 480 - heightVar, 80, heightVar);

That’s gonna make the image appear at 0, 0 when the gauge is full (heightVar = 480) and crop it from the top down as heightVar increases. I hope this helps you.

You’re also going to want to make sure that heightVar stays in the (0 – 480) interval. Otherwise, ghosts may appear.