Question 44675 in Html Question posted in
Some basic documentation can be found here.

HTML5 canvas drawimage avoid first time load latency

I am working on a sidescroller game and it has tiles that I am loading in as needed a little ahead of the player. They are 1000x1000px so not insignificant loading times.

While loading in the first time drawimage is called there is a noticeable latency of what I think is it transferring to the gpu.

I can preload everything to avoid this but would rather not.
I have tried onload then decode to have the image ready but I think that just decodes it on the cpu and the latency of transferring to the gpu is still present.

I could be wrong entirely about if this is the case its just what I am leaning towards.

Any ideas on how I can get it to the gpu canvas asynchronously?

Tags:

2

Answers


  1. 0

    createImageBitmap() is made just for this: it will create an ImageBitmap object, that does live in the GPU*, readily available for fast rendering.
    If you pass this method a Blob holding the data of a bitmap image, it will even take care of all the reading and decoding in an optimized way.

    HTMLImageElement#decode() may indeed resolve before the image buffer has been moved to the GPU, so for best performances, you’re better using an ImageBitmap*.

    *That is how it’s supposed to work, and how it does work in Chrome and Safari. Firefox still has a fake ImageBitmap implementation which holds the data only on the CPU side… On that browser, using an ImageBitmap is not necessarily better, yet.

    Login or Signup to reply.
  2. 0

    Loading images while the game is running is likely going to be slower than loading them all at once first. One of the fastest ways to do it is to have all images and animations on one single sprite sheet, the loading of that one sprite sheet then dictates when the game is ready to run, and you blit from that sprite sheet onto a canvas or canvases. That is, you drawImage from a section of the sprite sheet Image onto a section of the canvas, to scroll you change where you draw from and to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search