HTML5 Canvas: Text using strokeText

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

Similar to fillText, strokeText creates an outline of the text characters.

Its syntax is:


<!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.lineWidth = 3;
    canvas.strokeText('HTML5 Canvas', 20, 100);
</html> Text in canvas

Series Navigation<< HTML5 Canvas: Text in canvas using fillText
HTML5 Canvas: Filling up outline text >>

Leave a comment

Leave a Reply