What is Graphics in HTML5?

Sharad Jaiswal
Sharad Jaiswal

Posted On: Feb 22, 2018

 

In HTML5, graphics can be drawn using two graphics elements.

1. Canvas element:

It is a graphics element that is used to draw shapes using JavaScript. It has several methods for drawing paths, boxes, circles, and even add images.

Example

<canvas id="myCanvas" width="100" height="100"></canvas>

The above canvas code designs a square with 100 by 100 size.

2. SVG (Scalable Vector Graphics):

SVG is based on vector graphics. It is used to define graphics in XML format. Graphics designed by SVG doesn’t lose quality when zoomed in or resized.

Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The above HTML code designs a circle.

    Related Questions

    Please Login or Register to leave a response.

    Related Questions

    HTML5 interview questions

    What is HTML5 ?

    HTML5 is the most recent version of the HTML(Hypertext Markup Language). It is a language for structuring and displaying content for the World Wide Web, a core technology of the Internet...

    HTML5 interview questions

    What is < !DOCTYPE>? Is it necessary to use in HTML5 ?

    The &lt; !DOCTYPE&gt; is an instruction to the web browser about what version of HTML the page is written in. AND The &l..

    HTML5 interview questions

    List out the new features of HTML5?

    Some of the most interesting new features in HTML5:The &lt;canvas&gt; element for 2D drawing The &lt;video&gt; and &lt..