HTML Graphics
Graphics
HTML Graphics gives the more visual effects in web pages, we can draw shapes like circle , square.
<canvas> tag is used in graphics
For Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
</body>
</html>
After Creating the shape by using graphics we can use javascript for drawing lines
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
SVG
SVG stands for scalable vector graphics, SVG is the used for creating shapes
SVG Example for Drawing Circle
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</html>