HTML5 Canvas text stroke color

Author：Eve Cole Update Time：2025-04-30 00:48:01

Article introduction of Wulin.com (www.vevb.com): To set the stroke color HTML5 Canvas text, we can use the background of the strokeStyle canvas and the strokeText() method.

To set the stroke color HTML5 Canvas text, we can use the background of the strokeStyle canvas and the strokeText() method.

context.strokeStyle=[value];

context.strokeText(Hello World!, x, y);

Let’s take a look at the next example:

<!DOCTYPE HTML>

<html>

<head>

<title>html5_canvas_text_stroke</title>

<style>

body {margin: 0px;padding: 0px;}

#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}

</style>

window.onload = function(){

var canvas = document.getElementById(myCanvas);

var context = canvas.getContext(2d);

var x = 80;

var y = 110;

context.font = 60pt Calibri;

context.lineWidth = 3;

context.strokeStyle = blue; // stroke color

context.strokeText(Hello World!, x, y);

};

</script>

</head>

<body>

</canvas>

</body>

</html>