Canvas Element In HTML 5
The HTML5 Canvas component is a HTML label like the <div>, <p>, or <article> tag, with the special case that its substance are rendered with Javascript. So as to influence the HTML5 Canvas, we’ll have to place the canvas label some place inside the HTML archive, get to the canvas tag with Javascript, make a connection, and afterward use the HTML5 Canvas API to draw visualizations.
<canvas> …. </canvas>
At the point when utilizing canvas, its critical to comprehend the distinction between the canvas component and the canvas setting, as frequently individuals get these confounded. The canvas component is the genuine DOM hub that is installed in the HTML page. The canvas connection is an item with properties and routines that you can use to render design inside the canvas component.
Each one canvas component can just have one connection. In the event that we utilize the getcontext() technique numerous times, it will give back a reference to the same setting article.
REMEMBERING POINTS:
The Html5 canvas component is utilized to draw representation, on the fly, by means of scripting (normally Javascript).
The canvas component is just a compartment for representation. You must utilize a script to really draw the design.
Canvas has a few strategies for drawing ways, boxes, rings, content, and including pictures.
Here is the Syntax for CANVAS Element
Supported Browser
1
2
3
4
5
6
7
<canvas>
Some Text here
</canvas>
<script>
Some codes of JavaScript
</script>
Below is complete syntax along with example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<canvas id="canvasuses" width="180" height="90">
<p>Your browser does not support the HTML5 canvas element.</p>
</canvas>
<script type="text/javascript">
var c=document.getElementById("canvasuses");
var canvOK=1;
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1)
{
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
</script>
</body>
</html>
The post What Is Canvas Element In HTML 5 ? appeared first on 365 Lessons.