HTML5 CANVAS

<canvas> element is used to draw graphics in a web page.

<canvas> element defines an area of our website where you can create graphics, lines, circles, rectangles, etc..

<canvas> element is actually a graphics container.

The graphics are created using JAVASCRIPT.

Syntax HTML5 CANVAS

<canvas id="myCanvas" width="200" height="100" style="border:1px solid red"> Your browser does not support HTML5 canvas </canvas>

Understanding HTML5 CANVAS syntax:

The attribute "id" is the name of the item.

The attribute "width" specifies the width of the
The attribute "height" specifies the height of the element.
The "style" attribute specifies the style element.
It is also possible to put a text before the </canvas> to display if the browser does not support HTML5 CANVAS.

Examples HTML5 CANVAS

Website (verde.htm) that generates a green circle inside a red box.

<!DOCTYPE html> <html> <body>   <canvas id="myCanvas" width="200" height="100" style="border:2px solid red">     Your browser does not support the canvas element.   </canvas> <script type="text/javascript">   var canvas=document.getElementById("myCanvas");   var context=canvas.getContext("2d");   context.fillStyle="green";   context.beginPath();   context.arc(100,40,30,0,0.3,true);   context.closePath();   context.fill(); </script> </body> </html>

The result will be:

html5 canvas circle

If you draw a blue rectangle within a gray box

<!DOCTYPE html> <html> <body>   <canvas id="myCanvas" width="200" height="100" style="border:2px solid grey">     Your browser does not support the canvas element.   </canvas> <script type="text/javascript">   var canvas=document.getElementById("myCanvas");   var context=canvas.getContext("2d");   context.fillStyle="blue";   context.fillRect(10,10,150,25); </script> </body> </html>

The result will be:

html5 canvas rectangle