HTML5 Canvas Reference - fillStyle

We can use the fillStyle property to set or get the color, gradient, or pattern.

The fillStyle property is used to fill the shapes.

Browser compatibility


`fillStyle`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.fillStyle=color|gradient|pattern;

Property Values

Value	Description
color	A color value. Default value is #000000
gradient	A gradient object of linear or radial gradient
pattern	A pattern object to use to fill the drawing

Example

The following code uses a red color to fill a rectangle:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 150, 100);<!--from  w  ww.  ja v  a  2 s  .  c o m-->
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code creates a linear gradient color from top to bottom and then assign it to the fill style for the rectangle:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
    my_gradient.addColorStop(0, "red");
    my_gradient.addColorStop(1, "blue");
    ctx.fillStyle = my_gradient;<!-- w w  w. ja v  a  2  s  .c  o m-->
    ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code creates a linear gradient from left to right and assign it to the fill style for the rectangle:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
    my_gradient.addColorStop(0, "red");
    my_gradient.addColorStop(1, "blue");
    ctx.fillStyle = my_gradient;<!--from  www.j av a  2 s.c om-->
    ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code creates a pattern from an image and fill the drawing:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from  ww  w  .  j a va 2s  . c o  m-->
    var img = new Image();
    img.src = 'http://www.java2s.com/style/demo/border.png';
    img.onload = function () { 
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
            
        ctx.fillStyle = ctx.createPattern(img, 'repeat');
        ctx.fillRect(0, 0, 300, 150);
    }

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

The code above is rendered as follows:

Example 5

The following code shows how to create random noisy pattern.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!--from w  ww. j av a  2  s. c o  m-->
    for(var x=1;x<600;x++){
        for(var y=1;y<600;y++){
            var color= '#' + Math.floor (Math.random() * 16777215).toString(16);
            ctx.fillStyle=color;
            ctx.fillRect(x,y,1,1);
        }
    }

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

The code above is rendered as follows:

Example 6

The following code shows how to compare the transparency.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   <!--from w  w  w.  j  a  va2s .com-->
    ctx.beginPath();
    ctx.fillStyle = '#992200';
    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fill();
    ctx.closePath();
    ctx.fillStyle = 'rgba(255,255,255,1)';
    ctx.font = '10px verdana';
    ctx.textAlign = 'center';
    ctx.fillText("No transparency",canvas.width/2,10);
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.font = '10px verdana';
    ctx.textAlign = 'center';
    ctx.fillText("This is Transparent[0.5]",canvas.width/2,canvas.height/2);
    ctx.fillStyle = 'rgba(255,255,255,0.25)';
    ctx.font = '10px verdana';
    ctx.textAlign = 'center';
    ctx.fillText("This is Transparent[0.25]",canvas.width/2,canvas.height - 10);

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

The code above is rendered as follows: