Scribd
Upload
31 views3 pages

Canvas: Here Is The Syntax For CANVAS Element

The HTML5 Canvas component allows drawing graphics on a web page using JavaScript. The canvas element acts as a container for graphics, while JavaScript is used to actually draw on the canvas. The canvas element represents the drawing surface, and JavaScript gets a rendering context from the canvas to draw shapes, images, and text. For example, code can get a 2D rendering context, create a linear gradient, and use it to fill a rectangle drawn on the canvas.

Uploaded by

assm11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views3 pages

Canvas: Here Is The Syntax For CANVAS Element

The HTML5 Canvas component allows drawing graphics on a web page using JavaScript. The canvas element acts as a container for graphics, while JavaScript is used to actually draw on the canvas. The canvas element represents the drawing surface, and JavaScript gets a rendering context from the canvas to draw shapes, images, and text. For example, code can get a 2D rendering context, create a linear gradient, and use it to fill a rectangle drawn on the canvas.

Uploaded by

assm11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CANVAS

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 <canvas>
2 Some Text here
3 </canvas>
4
5 <script>
6 Some codes of JavaScript
</script>
7
Below is complete syntax along with example
1
2
3 <!DOCTYPE html>
4
5 <html>
6
7 <head>
<title>Title name will go here</title>
8 </head>
9
10 <body>
11
12 <canvas id="canvasuses" width="180" height="90">
13 <p>Your browser does not support the HTML5 canvas element.</p>
14 </canvas>
15
<script type="text/javascript">
16
17 var c=document.getElementById("canvasuses");
18 var canvOK=1;
19 try {c.getContext("2d");}
20 catch (er) {canvOK=0;}
21 if (canvOK==1)
{
22 var ctx=c.getContext("2d");
23 var grd=ctx.createLinearGradient(0,0,200,0);
24 grd.addColorStop(0,"green");
25 grd.addColorStop(1,"white");
ctx.fillStyle=grd;
26 ctx.fillRect(10,10,150,80);
27 }
28
29 </script>
30 </body>
31
32 </html>
33
34

You might also like