html5-canvas Media types and the canvas
Remarks
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
Media types
- Animations
- Videos
- Images
- HD images
- Vector image
- Animated images
Media formats
- Jpg/Jpeg
- Png
- Gif
- SVG
- M-JPEG
- Webm
- Webp
Images
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
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.toDataURL and 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
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 PNG format also provides animation support though browser support is limited, and access to the animation for use on the canvas can only be done via Javascript APIs & libraries
THe canvas can be used to encode PNG images via canvas.toDataURL and canvas.toBlob though the output format is limited to compressed 32Bit RGBA. The PNG will provide a pixel perfect copy of the canvas.
GIF
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
AS with PNG, GIF animations are not directly accessible for use on the canvas and you will need a Javascript API or library to get access. GIF can not be saved via the canvas and will require and API or library to do so.
