This topic is to cover the various media types and how they can be used with the canvas in 2D interface.
Media types have generic and format specific categories
There are a wide variety of image formats supported by browsers, though no browser support them all. If you have particular image formats you wish to use Wiki Browsers and supported image formats provides a good overview.
The best support is for the 3 main formats, "jpeg", "png", and "gif" with all the major browsers providing support.
JPEG images are best suited to photos and photo like images. They do not lend them selves well to charts, diagrams, and text. JPEG images do not support transparency.
Canvas can output JPEG images via
canvas.toBlob and provides a quality setting. As JPEG does not support transparency any transparent pixels will be blended with black for the final output JPG. The resulting image will not be a perfect copy of the canvas.
PNG Image are the highest quality images and can also include an alpha channel for transparent pixels. The image data is compressed but does not produce artifacts like JPG images.
Because of the lossless compression and the alpha channel support PNGs are used for games, ui component images, charts, diagrams, text. When using them to for photo and photo like images their file size can be much larger than JPEG's. .
THe canvas can be used to encode PNG images via
canvas.toBlob though the output format is limited to compressed 32Bit RGBA. The PNG will provide a pixel perfect copy of the canvas.
GIFs are used for short animations, but can also be used to provide high quality charts, diagrams, and text like images. GIFs have very limited colour support with a maximum of 256 colours per frame. With cleaver image processing gif images can produce surprisingly good results, especially when animated. Gifs also provide transparency though this is limited to on or off