Gradual Rendering of Progressive Images in HTML5 Canvas

Question

Is there a way to draw partially loaded progressive Image objects (PNG, JPG) into canvas?

Most browsers support progressive loading in the tag, but I can't find how it can be controlled in within canvas.

Answer 1

The answer is no, as per the specification's orders.

If a browser does happen to do this, it is against the spec, which states:

If the image isn't yet fully decoded, then nothing is drawn.

When an img element is in the completely available state and the user agent can decode the media data without errors, then the img element is said to be fully decodable.

Answer 2

You can take a look at streamingtextures js lib which use custom decoding of progressive JPEG images (via Emscripten version of libjpeg) and return image content as an array of bytes.

This method is used with WebGL but could be also used for 2D canvas and extended to support also GIF, PNG and WebP