Working With Canvas in HTML5

A K
13y
11.5k
0
0

Article

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