HTML5 Canvas Tutorials - styles and colors on canvas

Specifying color on canvas - FillStyle() attribute

The fillStyle attribute is useful for specifying fill color for any closed path/figure/text on canvas. If you are filling a closed path, it is important to use the fill() method after drawing the path. The fillStyle attribute is very similar in usage to the strokeStyle attribute.

You could directly specify the color as follows:

fillStyle="green";

If you want more control over the colours, you can either specify the hexadecimal value of the colour or the decimal value. If you are specifying hex value, the value can range from 000000 to FFFFFF. Alternately, you can specify the value of red, green and blue in decimal. In this case, each of the values will range from 0 to 255.
For eg:

fillStyle = "AFFF2F";
fillStyle="rgb(255,100,100)";

If you are specifying the text color using rgb value, you can also specify the transparency of the color by passing a fourth parameter. The value of this parameter will range from 0 to 1 with 0 being fully transparent and 1 being fully opaque.

For eg:

fillStyle = "rgba(255,100,100,0.5)";

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{

var ctx = canvas.getContext("2d");
ctx.font="30px verdana";

// Specify colour in decimal value
ctx.fllStyle="rgb(0,0,0)";
ctx.fillText("Believe", 450,40);

// Specify colour directly
ctx.fillStyle="green";
ctx.fillRect(100, 20, 100, 50);

// Specify colour in hexadecimal value
ctx.fillStyle="#00FFAA";
ctx.fillRect(250, 20, 100, 50);

// Specify colour with transparency
ctx.fillStyle="rgba(254,0,0,0.5)";
ctx.fillRect(300, 40, 100, 50);
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Try Code