How to Set the Stroke Color in HTML5 Canvas Text

In this article I have described how to set the stroke color of Canvas Text in HTML5.
  • 2365

Stroke Color of HTML5 Canvas Text

  • Canvas element has a property to set the stroke color of canvas text in HTML5.
  • For this we can use property called "strokeStyle" of canvas element and  also use strokeText() method.


The syntax to set the property of canvas element 


    context.strokeStyle = 'red';

    context.lineWidth = 5;

    context.strokeText('Dotnetheaven', x, y);



Lets take an example





        window.onload = function () {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

            var x = 60;

            var y = 210;

            context.font = "60pt Verdana";

            context.lineWidth = 4;

            context.strokeStyle = "green";

            context.strokeText("WELCOME", x, y);





    <canvas id="myCanvas" width="578" height="200"></canvas>






canvas stroke.jpg

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.