HTML5 Canvas

What is HTML5 Canvas?

  • The <canvas> element is an easy and powerful way for drawing graphics using JavaScript.
  • It is used for drawing graphs, photo compositions or do simple animations.
Syntax:
<canvas id= “mycanvas” width =“100” height =“100”></canvas>

Where,
     it has two compulsory attributes width and height and,
     the core attributes like id, name and class etc, as per the requirement.

The <canvas> element in DOM can be found by using the getElementByID() method as follows:
var canvas = document.getElementById(“mycanvas”);

Example : Creating a Sample Canvas

<!DOCTYPE HTML>
<html>
     <head>
   
     </head>
     <body>
          <canvas id="mycanvas" width="300" height="150" style="border:3px solid black"></canvas>
     </body>
</html>


Output:

canvas 1
▲