HTML Canvas Text Color
HTML Canvas Text Color
To set the color of the text on the canvas, we use two properties:
-
fillStyle- defines the fill color for the text -
strokeStyle- defines the color of the outline text
The fillStyle Property
The fillStyle property defines the fill color of the text.
Example
Set font to 50px "Arial". Set fill color to purple. Write the filled text on the canvas. Start in position (10,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,80);
</script>
Try it Yourself »
The strokeStyle Property
The strokeStyle property defines the color of the
outline of the text.
Example
Set font to 50px "Arial". Set outline color to purple. Write the outlined text on the canvas. Start in position (10,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,80);
</script>
Try it Yourself »
Fill Text with Gradient
Example
Here we fill a text with a gradient:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill text with gradient
ctx.font = "50px Arial";
ctx.fillStyle =
grad;
ctx.fillText("Hello World",10,80);
</script>
Try it Yourself »
Fill Outlined Text with Gradient
Example
Here we fill an outlined text with a gradient:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill outlined text with gradient
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
Try it Yourself »
