The ** Canvas tag** is used to draw graphics on the HTML web page. You can use multiple canvas tag on one HTML page. It allows users to create an imaginary input such as objects , images , signature , animations , etc.
The canvas tag is only a container for graphics. You should use JavaScript to draw the graphics. By default, the canvas element has no border and no content. It is one of the new sectioning elements in HTML 5 so earlier browsers do not support this element.
A canvas context is an object with its properties and methods for rendering. The canvas element can have only one context. The context maybe 2D or 3D. The exact size of an canvas element depends on the browser. You can change it by using the CSS property.
Estimated reading time: 3 minutes
Syntax:
It contains both an opening canvas tag and closing canvas tag. The content is written between these two tags.
<canvas width="150" height= "150"></canvas>
Sample for HTML canvas Tag:
Here is an example code for creating a basic, empty canvas:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h2>Sample Canvas</h2>
<canvas id="sample" width="150" height="150" style="border:2px solid;">
Your browser doesn’t support the HTML5 canvas element.</canvas>
</body>
</html>
Result:
HTML canvas Tag with JavaScript:
Let’s see the following examples to draw graphics on HTML page using the canvas tag with JavaScript.
Sample of canvas tag to draw a Rectangle on the Fly:
<canvas id="SampleCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("SampleCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#C40655";
ctx.fillRect(0, 0, 300, 150);
</script>
Result:
Sample of canvas tag to draw a Line:
To draw a straight line on the canvas, use the following two steps:
- moveTo (x, y) – It specifies the starting point of the line.
- lineTo (x, y) – It specifies the ending point of the line
<!DOCTYPE html>
<html>
<body>
<h2>Draw a line</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>
Result:
Attributes:
The canvas tag supports the global attributes and the event attributes.
th, td{ padding: 20px; }
| Attributes | Value | Description |
|---|---|---|
| height | pixels | This attribute helps to define the element height in pixels. |
| width | pixels | It specifies the element width in pixels. |
Browser Support:
Related Articles:
- HTML
- HTML
Line Break Tag - Basic HTML Definitions and Usages in the Real World
- HTML
Applet Tag - HTML Basefont Tag
The post HTML Canvas Tag appeared first on Share Point Anchor.
Top comments (0)