You can use fillStyle or strokeStyle to set the colour of the text, depending on whether you are using fillText() or strokeText() method respectively.
fillStyle = color; strokeStyle = color;
Where color can be specified three ways.
You could directly specify the color as follows:
fillStyle = "green"; strokeStyle = "green";
If you want more control over the colours, you can either specify the colour using hexadecimal values or decimal values. If you are specifying hex value, the value can range from 000000 to FFFFFF.
For eg: fillStyle = "AFFF2F"; strokeStyle = "AFFF2F";
Alternately, you can specify the value of red, green and blue in decimal. Each of the values will range from 0 to 255.
for eg: fillStyle = "rgb(255,100,100)"; strokeStyle = "rgb(255,100,100)";
If you are specifying the text color using rgb values, 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 1 being fully transparent and 1 being fully opaque.
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
// Specify the font size and font name
ctx.font = "15px verdana";
// Note that the color is still red as above, but it will appear lighter due to the //transparency
ctx.strokeStyle = "rgba(255, 0,0,0.3)";
ctx.strokeText("Believe start", 100,80);
}
}
</script>
<title>Specifying shadow and bevel</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
