In HTML5 we can draw graphics using HTML elements instead of depending on images or third-party components like Flash.
There are the following two type of graphics elements:
- Canvas
- Scalable Vector Graphics (SVG)
Canvas Element
The <canvas> element:
- 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.
The following is a sample of drawing a rectangle using a Canvas Element:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(25,25,100,100);
context.fillStyle='#8ED6FF';
context.fill();
context.stokeStyle='blue';
context.stroke();
</script>
</body>
</html>
Scalable Vector Graphics (SVG)
A <SVG> element:
- is based on vector-based family of graphics.
- defines graphics in XML Format.
- creates graphics that does not lose any quality when zoomed or resized
The following is a sample of drawing a rectangle using an <SVG> Element:
<!DOCTYPE HTML>
<html>
<head>
<title>SVG Testing</title>
</head>
<body>
<svg height="500" width="500">
<rect x="50" y="100" height="100" width="200" fill="red" stroke="black" stroke-width="2"/>
</svg>
</body>
</html>
