HTML5 Canvas: Filling up outline text

This entry is part 14 of 17 in the series HTML5 Canvas

We can fill the outline text with a light color such as gray.

To fill the text, we need another fillText as shown in the example below.

The text is filled up with the color #ccc which is quite close to gray color.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Text in canvas</title>
        canvas {
            border: 1px solid #000;
<canvas id='canvas' width='650' height='300'></canvas>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.font = 'bold 80px Tahoma';
    canvas.strokeStyle = '#000';
    canvas.fillStyle = '#ccc';
    canvas.lineWidth = 3;
    canvas.fillText('HTML5 Canvas', 20, 100);
    canvas.strokeText('HTML5 Canvas', 20, 100);

Series Navigation<< HTML5 Canvas: Text using strokeText
HTML5 Canvas: Drawing an image with drawImage >>

Leave a comment

Leave a Reply