[HTML5] Graphics – Figures and Canvas

Let’s find out new changes in HTML5 regarding images and graphics.

 

1. Figures

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>

 

2. Canvas

The <canvas> tag is used to draw graphics, on the fly, via scripting (JavaScript). The <canvas> element just defines an area for drawing.

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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s