In this article, we will draw graphics by using the canvas element in the document. This tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text.
Note: This tag is new in HTML5.
Syntax:
<canvas id = "script"> Contents... </canvas>
Example 1:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>
How to Draw Graphics using
Canvas in HTML5 ?
</title>
<style>
#FirstCanvas {
width: 300px;
height: 300px;
border: 3px solid red;
background-color: blue;
}
</style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html> <html>
<head>
<title>
How to Draw Graphics
using Canvas in HTML5?
</title>
</head>
<body>
<canvas id="geeks" height="200"
width="200" style=
"border:1px solid black">
</canvas>
<script>
var c = document.getElementById("geeks");
var cx = c.getContext("2d");
cx.beginPath();
cx.arc(100, 100, 90, 0, 2 * Math.PI);
cx.stroke();
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari