CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
musse1
musse1

Reputation: 389

Canvas drawImage is slow on large source

I'm making a game and are creating a camera to follow the player. I've got a large canvas (game map) of 4096x4096px. For this I would like to draw only a portion of this with:

ctx.drawImage( canvas, 0, 0, 800, 600, 0, 0, 4096, 4096 );

Before each frame I will call:

ctx.clearRect( 0, 0, 800, 600 );

To only clear the camera. What I can see is that drawImage is super slow, performance wise. Is my game map to large and that is not handled by drawImage? How do I create a smooth rendering?

Upvotes: 0

Views: 2309

Answers (2)

markE
markE

Reputation: 105015

I think you might be misunderstanding some arguments of drawImage.

As you've written drawImage, it will clip an 800x600 from the source. Then it will enlarge it to 4096x4096. And it will finally draw that 4096x4096 on the canvas.

So you have a 4096x4096 spritesheet. You want to clip a 800x600 part from that spritesheet and draw that clipping to canvas:

// this will clip 800x600px from your source image
// starting at top-left == [1600,0]
// and it will paint that clipping at [0,0] on the canvas
// while not changing the clipping size from its original 800x600

ctx.drawImage(
    yourImage        // use yourImage as the source image
    1600,0           // clip from the source image with top-left at [1600,0]
    800,600          // clip 800x600px from the source
    0,0              // paint the clipping at [0,0] on the canvas
    800,600          // use the same 800x600 size that was clipped
);

Upvotes: 3

EvilZebra
EvilZebra

Reputation: 1072

We would need to see more code to really know where the performance issues are.

Most likely it is the size that is slowing you down. drawImage() is easily the fastest method for updating the canvas but there are other things which can slow you down a lot such as use of getImageData() or inefficient Javascript.

Upvotes: 0

Related Questions