Scrolling huge backdrop in canvas

My problem is the company I'm working for has started giving me art for the game I'm making for them and it has a huge world! It has given me a huge backdrop image like 12923x5356 huge!

I've now been able to get it to scroll and work like a backdrop but it's a bit slow on my old computer that's an old thinkcenter (note it can only run crunchbang and barely xp). See we want to be able to support tablets for this. It also further complicates things that they have an overlay as well just as big.

Right now I have it only drawing a canvas sized chunk of the backdrop so it only draws as much as can be seen by using

ctx.drawImage(img, x, y, width, height, dx, dy, dwidth, dheight); 

with the dx/dy always drawing to the same spot and x/y scrolling with the main character.

Now realistically, is there any way to possibly do this faster? Another way I can think of is to maybe break the image down to small chunks with getImageData and drawing just so many that fills the screen with ctx.putImageData(img, x, y). I'm pretty sure from experience that the small form of drawImage is a bit faster than开发者_开发百科 the long form but would this be much faster?

Anyone else have any ideas they can shoot at me?

You can make it into smaller tiles, just like how Google Maps does.

I'm not sure if you're handling some huge game map, but the technique should be the same. You can split the map into small tiles of, for example, 256px * 256px. Then you only need several 256px * 256px div to cover the viewport. If you use canvas instead, it's the same. Just render those tiles which are currently shown to the user.