”;
In the previous chapter, we have just focused on drawing shapes on the Canvas using basic styles. In this and the next chapters, we will focus on how to make the shapes and Canvas elements attractive by using various styles.
We can perform various operations on the Canvas element and the graphics drawn inside it to make them attractive. The concepts which we use to achieve the required graphics by styles and colors are listed below. Each one of the properties has its own function and uses. We will be learning clearly about each of them in the next pages.
-
Colors
-
Transparency
-
Styles for lines
-
Gradients
-
Patterns
-
Shadows
Colors
Till now we have seen how to draw shapes on Canvas elements. Now we will be seeing how to add colors to the shapes drawn.
The properties available to apply colors to the Canvas element are listed in the below table.
| S.No | Property & Description |
|---|---|
| 1 |
fillStyle
This property is used to fill a color inside the shape. |
| 2 |
strokeStyle
This property is used to color the shape outline. |
The color property can be assigned in four types
-
Give the name of color directly
Eg − ”green”, ”blue”
-
Give color input using hexadecimal values. All the colors are available in the range #000000 to #ffffff.
-
Give the color using RGB values.
Eg − rgb(0,5,10). The values of all colors are between rgb(0,0,0) to rgb(255,255,255).
-
Give the color input using RGBA values.
Eg − rgba(0,100,200,1)
Where
-
r − red component
-
g − green component
-
b − blue component
-
a − opacity value. The value is between 0 and 1 respectively.
-
Example
Following example demonstrates fillStyle property on circle and strokeStyle on square. The implementation is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Color</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="color();">
<canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
<script>
function color() {
var canvas = document.getElementById(''canvas'');
var context = canvas.getContext(''2d'');
// fillStyle for circle
context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
context.fillStyle = ''green'';
context.fill();
// strokeStyle for square
context.beginPath();
context.rect(250, 65, 75, 75);
context.strokeStyle = ''red'';
context.stroke();
context.closePath();
}
</script>
</body>
</html>
Output
The important thing to remember while using the color properties is that when any property is given, it is applied to the whole shapes in the Canvas. To make the property applicable for only the specified shape, we must use beginPath() and closePath() for the shape. The output for the above code is
Transparency
Sometimes there is a need for the user to make his graphics transparent. The Canvas is equipped with the translucent property which can be done by using the globalAlpha property or by simply assigning transparency for the Canvas using ”rgba” in the color properties.
The property used to make the Canvas element transparent is globalAlpha. The syntax is given below
Canvas.globalAlpha = transparency_value
The transparency value lies between 0 and 1 where 0 indicates the shape is completely transparent and 1 indicates the shape is opaque. For any shape in the Canvas element, the transparency value is 1 (opaque) by default.
Example using globalAlpha
The following example takes the same square filled with red color and demonstrates their transparency at different globalAlpha levels. The implementation code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transparency</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="transparency();">
<canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
<script>
function transparency() {
var canvas = document.getElementById(''canvas'');
var context = canvas.getContext(''2d'');
// square with 0.25 transparency
context.beginPath();
context.rect(50, 50, 75, 75);
context.globalAlpha = 0.25;
context.fillStyle = ''red'';
context.fill();
context.closePath();
// square with 0.5 transparency
context.beginPath();
context.rect(150, 50, 75, 75);
context.globalAlpha = 0.5;
context.fillStyle = ''red'';
context.fill();
context.closePath();
// square with 0.75 transparency
context.beginPath();
context.rect(250, 50, 75, 75);
context.fillStyle = ''red'';
context.fill();
context.closePath();
// square with 1 transparency
context.beginPath();
context.rect(350, 50, 75, 75);
context.globalAlpha = 1;
context.fillStyle = ''red'';
context.fill();
context.closePath();
}
</script>
</body>
</html>
Output
The output for the following code is
Example using color properties
We use rgba color for the Canvas color properties and demonstrate the color property in the below example. The implementation is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transparency</title>
<style></style>
</head>
<body onload="transparency();">
<canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
<script>
function transparency() {
var canvas = document.getElementById(''canvas'');
var context = canvas.getContext(''2d'');
context.rect(50, 50, 400, 100);
context.strokeStyle = ''black'';
context.stroke();
context.beginPath();
context.rect(50, 50, 100, 100);
context.fillStyle = ''rgba(0,0,255,1)'';
context.fill();
context.closePath();
context.beginPath();
context.rect(50, 50, 200, 100);
context.fillStyle = ''rgba(0,0,255,0.75)'';
context.fill();
context.closePath();
context.beginPath();
context.rect(50, 50, 300, 100);
context.fillStyle = ''rgba(0,0,255,0.50)'';
context.fill();
context.closePath();
context.beginPath();
context.rect(50, 50, 400, 100);
context.fillStyle = ''rgba(0,0,255,0.25)'';
context.fill();
context.closePath();
}
</script>
</body>
</html>
Output
The output for the following code is
Rules to fill colors in Canvas
We have used the fill() method so many times in previous chapters which does not take any parameters. We can include parameters to the function to make some complex fill shapes. While using fill(), we can optionally provide a specific algorithm to determine the point position and to whether fill it or not. Two types of values can be passed to the function which is given below.
-
nonzero − This is the default rule for the fill function which finds out whether the point or shape lies outside the path or not but fills all the available objects.
-
evenodd −This finds out whether to fill the shape or area available in the path and fills the shape available in an even odd manner.
Example
Let us make two nested squares and find out how each of the value is working. The implementation code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>canvas fill rules</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="fill();">
<canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
<script>
function fill() {
var canvas = document.getElementById(''canvas'');
var context = canvas.getContext(''2d'');
// using nonzero
context.beginPath();
context.rect(95, 60, 60, 60);
context.rect(50, 20, 150, 150);
context.lineWidth = 5;
context.strokeStyle = ''red'';
context.stroke();
context.fillStyle = ''yellow'';
context.fill(''nonzero'');
context.closePath();
// using evenodd
context.beginPath();
context.rect(345, 60, 60, 60);
context.rect(300, 20, 150, 150);
context.lineWidth = 5;
context.strokeStyle = ''red'';
context.stroke();
context.fillStyle = ''yellow'';
context.fill(''evenodd'');
context.closePath();
}
</script>
</body>
</html>
Output
The output for the above code is
”;