HTML Canvas - Colors

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

Colors

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 GlobalAlpha

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

Example Using Color Properties

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

Rules to Fill Colors
Advertisements