Reader Level:
ARTICLE

Working With Canvas in HTML5

Posted by A K Articles | HTML 5 October 03, 2011
Here, we will learn how to use the Canvas Element in HTML5.
  • 0
  • 0
  • 6083

Introduction: The canvas element is used for drawing graphics using JavaScript. Its default size is 300 pixel wide and 150 pixel high. Now we use canvas element in our page. We write following code

<!DOCTYPE HTML>
 <
html>
 <
body>
 <
canvas></canvas>
 </
body>
 </
html>

We look at this page in the browser. The canvas will be not visible, because by default the canvas area is invisible. So, now we set a border and write the following code

 
<!DOCTYPE HTML>
 <
html>
 <
body>
 <
canvas style="border:2px solid #33C5FF;"></canvas>
 </
body>
 </
html>

Now the canvas area is visible. The page will look like the below figure
 
canvas-area


Adding Graphics in Canvas

Now we try to a draw rectangle on canvas. We use JavaScript for drawing an object in the canvas area. With the fillRect method we can draw a rectangle. We pass four parameter values as fillRect(X,Y,Width,Height). X and Y defines (x,y) co-ordinate and width, height for Height and Width respectively. We write the following code

 
<!DOCTYPE HTML>
 <
html>
 <
body>
 <
canvas id="CAN" style="border:2px solid #33C5FF ;">
 </
canvas>
 <
script type="text/javascript">
 
    var VAR1 = document.getElementById("CAN");
     var VAR2 = VAR1.getContext("2d");
     VAR2.fillRect(10, 10, 100, 90);

 </
script>
 </
body>
 </
html>

We run this code. The page will look like the below figure
 

drawing-rectangle-in-canvas

Here we note that the background color of the rectangle is black. It is the default color. Now we set a background color for it. We add a fillstyle property to asign a  color to it. The
fillstyle property accepts a hexadecimal color value. We write following code

<!DOCTYPE HTML>
<
html>
<
body>
<
canvas id="CAN" style="border:2px solid #33C5FF ;">
</
canvas>
<
script type="text/javascript">
    var VAR1 = document.getElementById("CAN");
    var VAR2 = VAR1.getContext("2d");
    VAR2.fillStyle = "#E0D5DD";
    VAR2.fillRect(10, 10, 100, 90);

</
script>
</
body>
</
html>

We run this code. The page will look like the  below figure

 fill-color

We can draw a custom shape also. We start it with beginpath() then we draw our custom shape and finish it with closepath(). Like the following code

<!doctype html>
 <
html>
 <
body>
 <
canvas id="CAN" style="border:2px solid #33C5FF ;">
 </
canvas>
 <
script type="text/javascript">
 
    var VAR1 = document.getElementById("CAN");
     var VAR2 = VAR1.getContext("2d");
     VAR2.fillStyle = "#807C58";
     VAR2.strokeStyle = "#f00";
     VAR2.lineWidth = 6;
     VAR2.beginPath();
     VAR2.moveTo(20, 20);
     VAR2.lineTo(120, 60);
     VAR2.lineTo(160, 90);
     VAR2.lineTo(80, 120);
     VAR2.lineTo(20, 20);
     VAR2.fill();
     VAR2.stroke();
     VAR2.closePath();

 </
script>
 </
body>
 </
html>

We run this code. The page will look like the below figure

custom-shape

We can also set a shadow to the shape of a canvas element by assigning a color value to the  property - shadowColor. Like the following code

<!doctype html>
 <
html>
 <
body>
 <
canvas id="CAN" style="border:2px solid #33C5FF ;">
 </
canvas>
 <
script type="text/javascript">
 
    var VAR1 = document.getElementById("CAN");
     var VAR2 = VAR1.getContext("2d");
     VAR2.shadowOffsetX = 10;
     VAR2.shadowOffsetY = 12;
     VAR2.shadowBlur = 6;
     VAR2.fillStyle = "#807C58";
     VAR2.shadowColor = "#7B51C4";
     VAR2.beginPath();
     VAR2.moveTo(20, 20);
     VAR2.lineTo(120, 60);
     VAR2.lineTo(160, 90);
     VAR2.lineTo(80, 120);
     VAR2.lineTo(20, 20);
     VAR2.fill();
     VAR2.stroke();
     VAR2.closePath();

 </
script>
 </
body>
 </
html>

Then, We run this code. The page will look like the below figure

custom-shape-shadow 

COMMENT USING

Trending up