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]()