2

Im trying to draw large images (5000*5000 px) on HTML5 canvas. What is the best practices for doing this?

  • Should I use one canvas or many canvases (tiles way) for this?
  • What should I use drawImage() or putImageData()?
  • What about performance and memory usage in this cases?

Can you guys recommend best readings for this and share your personal experience?

Vlad Tsepelev
  • 2,056
  • 1
  • 21
  • 32

2 Answers2

1

Here is what I know so far:

Double buffering images -> great for your speed.

Anti-aliased images -> awesome quality of images even if resized

A good tip -> If you plan on using putImageData()

My experience as a HTML5 Game dev is that these two practices are really great, I use them both.

When displaying lots of complex objects (I don't know if it's related, but might come in handy, it was really great to learn how to do this correctly)

Also; this

Community
  • 1
  • 1
Valentin Roudge
  • 555
  • 4
  • 14
  • Double buffering is not needed for canvas. If you check out that article you linked the article is debunked in the comments. The other tips aren't bad though. – Loktar Dec 12 '13 at 15:43
  • Well my bad. Might be the wrong link ! Very interesting read, though: http://www.html5rocks.com/en/tutorials/canvas/performance/ – Valentin Roudge Dec 12 '13 at 15:52
0

It depends on what you're doing it for, but if you plan on scrolling around a 5000px5000px image I would definitely break it up into sections or tiles and use drawImage to only draw the parts the user will see.

For drawing large images you will see a performance decrease using putImageData its what drawImage is there for. putImageData is amazing when doing anything with particles, etc. Basically when you are drawing lots of small pieces to the screen you can easily draw 100,000 objects using putImageData.

Performance and memory usage shouldn't be a problem if you are only drawing the sections the user can see, heck even the full 5000x5000 shouldnt be too much of an issue honestly. What you're doing is not uncommon at all most browsers should be able to handle it.

Here is a poor unfinished example I was working on for a previous employer the example uses a ton of tiles, even implements collisions and pathfinding and runs fine. If I were to just draw out one big map image it would be around 10000x10000 if I remember correctly (each tile is 64x64)

Loktar
  • 34,764
  • 7
  • 90
  • 104