It is used to draw graphics and animations using JavaScript. There are two APIs available for this: Canvas API and WebGL API.
The <canvas> element is transparent as it is just a container for graphics.
To make it more accessible, an alternative content must be provided within <canvas>, which will be displayed in browsers with JavaScript disabled or that do not support the element.
You can give a dimension to the <canvas> by giving a value in pixels to its width and height attributes. It could also be done by assigning values to it with CSS, but doing so resizes the image during rendering to fit the size assigned with styles, which can cause the final result to appear distorted. It is therefore better to use the attributes of the <canvas> element directly, either in the HTML itself or assigning them with JavaScript. By default, browsers usually bring a size of 300px wide by 150px high.
There is a maximum size for the <canvas>, which varies with browsers but is typically 32,767 pixels. If the width and/or height are greater than that, the element will not be usable and the commands to draw will not work.
- Type: block
- Self-closing: No
- Semantic value: No
Top comments (0)