Graphics in HTML 5
This article is in continousation of previous article, here we will try to understand two features of HTML 5
No Need of Plugins
HTML 5 do not need any third party plugins for graphics like flash, silver light, it has built tin facilities to create the graphics using html and JavaScript. You also do not need any third party plugin for embedding video or audio in your website since html 5 has it’s own tags for video and audio.
Graphics in HTML 5
In HTML5 we can draw graphics using HTML elements with JavaScript instead of depending on images or third-party components like Flash, silver light etc. HTML 5 provides you following two options for graphics –
- Canvas
- Scalable Vector Graphics (SVG)
HTML 5 Canvas
You can create the canvas using <canvas> element/tag. The HTML5 canvas element can be used to draw graphics on the web page via JavaScript.By default the <canvas> element has 300 px of width and 150 px of height without any border and content. However, custom width and height can be defined using the CSS height and width property whereas the border can be applied using the CSS border property.
- helps the browser to draw shapes and images without any plugin.
- is used to draw graphics, on the fly, via scripting.
- has several methods for drawing paths, boxes, circles, characters and adding images.
<html>
<head>
<title> Content Editable </title>
</head>
<body>
<canvas id="cv" width="500" height="500">
</canvas>
<input type="button" value="click" onclick="draw()" />
<script type="text/javascript">
function draw()
{
var v = document.getElementById("cv");
var cnt = v.getContext("2d");
cnt.fillStyle="red";
cnt.fillRect(100,100,100,100);
cnt.moveTo(200,200);
cnt.lineTo(300,300);
cnt.stroke();
cnt.arc(95,50,40,0,2*Math.PI);
cnt.fillText("Hello",400,400);
cnt.stroke();
}
</script>
</body>
</html>Scalable Vector Graphics (SVG)
A <svg> element is used to create the scalable vector graphics. The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector based graphics for the web. Unlike raster image (e.g. .jpg, .gif, .png, etc.), a vector image can be scaled up or down to any extent without losing the image quality.
An SVG image is drawn out using a series of statements that follow the XML schema — that means SVG images can be created and edited with any text editor, such as Notepad. There are several other advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.
- SVG images can be searched, indexed, scripted, and compressed.
- SVG images can be created and modified using JavaScript in real time.
- SVG images can be printed with high quality at any resolution.
- SVG content can be animated using the built-in animation elements.
- SVG images can contain hyperlinks to other documents.
<html>
<head>
<title> Content Editable </title>
</head>
<body>
<svg width="500" height="500">
<polygon points="100,10 40, 180 190,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
<circle cx="200" cy="200" r="40" stroke="green" storke-width="4" fill="yellow" />
<rect x="250" y="250" width="100" height="100" style="fill:green;stroke:red;stroke-width:4;" />
</svg>
</body>
</html>In next post we will try to understand the video and audio in html 5.
Difference between SVG & Canvas
| SVG | Canvas |
| Less Animation | More Animation |
| High Level Graphics | Low Level Graphics |
| Mouse Interactions | Keyboard Interactions |
| Easy UIS | JS Centric |
| Tree of Objects (XML) | Pixels |