How to Set the Stroke Color in HTML5 Canvas Text

Posted in HTML 5 | HTML 5 Canvas on July 16, 2019

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

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.

Syntax

The syntax to set the property of canvas element

context.strokeStyle = 'red';

context.lineWidth = 5;

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

</script>

Lets take an example

<!DOCTYPE HTML>

<html>

<head>

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);

};

</script>

</head>

<body>

</body>

</html>

OUTPUT

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