Sometimes, we want to draw text with an outer stroke with HTML5 canvas and JavaScript.
In this article, we’ll look at how to draw text with an outer stroke with HTML5 canvas and JavaScript.
How to draw text with an outer stroke with HTML5 canvas and JavaScript?
To draw text with an outer stroke with HTML5 canvas and JavaScript, we can use the the strokeText and fillText methods.
For instance, we write:
<canvas widrth='400' height='400'></canvas>
to add a canvas.
Then we write:
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const text = 'hello'
ctx.font = '80px Sans-serif';
ctx.strokeStyle = 'black';
ctx.lineWidth = 8;
ctx.strokeText(text, 10, 70);
ctx.fillStyle = 'white';
ctx.fillText(text, 10, 70);
to select the canvas with querySelector and the context with getContext.
Then we set the font to the font style we want.
We set `strokeStyle to set the text stroke color.
lineWidth we set to the width of the line.
Then we call strokeText to draw text with an outer stroke.
And finally, we call fillText to add the filling of the text.
Conclusion
To draw text with an outer stroke with HTML5 canvas and JavaScript, we can use the the strokeText and fillText methods.
