Gradually rendering progressive images in HTML5 canvas
Is there a way to draw partially loaded progressive image objects (PNG, JPG) to canvas?
Most browsers support progressive loading in the tag, but I cannot find how this can be controlled inside the canvas.
The answer is no, according to the spec instructions.
If the browser does this, it is against the specification, which says:
If the image is not fully decoded yet, then nothing is drawn.
When the img element is in a fully accessible state and the user agent can decode the media without error, the img element is said to be fully decoded.
You can take a look at the streamingtextures js lib , which uses custom decoding of JPEG progressive images (via Emscripten version of libjpeg) and returns the image content as a byte array.
This method is used with WebGL but can also be used for 2D canvas and extended to support GIF, PNG and WebP