Let’s find out new changes in HTML5 regarding images and graphics.
The <figure> element has been added to HTML5 to mark up illustrations, diagrams, photos (images) in a document. The <figcaption> element defines a caption for a <figure> element and can be placed as the first or last child of the <figure> element.
<figure> <img src="img/pic.png" alt="pic" /> <figcaption>My Image</figcaption> </figure>
There are 2 attributes: “height” and “width“.
- You can add as many <canvas> elements as you like.
- By default, the canvas is transparent.
- The “height” and “width” attributes defines the drawing area. They are different from CSS styling. If you set CSS width and height for a canvas, the canvas is scaled to fit that size.
- The default height is 150px.
- The default width is 300px.
<canvas id="mycanvas" height="300" width="600" style="border: 1px solid;"> </canvas>
Any text in the <canvas> element will be displayed in browsers that does not support the element.
<canvas id="mycanvas" height="300" width="600"> Canvas is not supported. Please update your browser. </canvas>