Canvas strokeText(): Draw Text Outlines
strokeText(text, x, y[, maxWidth]) draws the outline of text using the current strokeStyle, lineWidth, font, alignment, and baseline settings.
Like fillText(), it draws directly to the Canvas and does not add glyphs to the current path.
Basic strokeText() example Top ↑
const canvas = document.getElementById('stroke_text_canvas');
const ctx = canvas.getContext('2d');
ctx.font = '46px serif';
ctx.strokeStyle = '#c2185b';
ctx.lineWidth = 2;
ctx.strokeText('plus2net.com', 30, 85);Combine filled and outlined text Top ↑
ctx.font = 'bold 48px sans-serif';
ctx.fillStyle = '#fff4c2';
ctx.strokeStyle = '#6a4b00';
ctx.lineWidth = 3;
ctx.fillText('Canvas', 30, 80);
ctx.strokeText('Canvas', 30, 80);Using maxWidth Top ↑
An optional fourth argument limits the requested rendered width. The browser may adjust glyph spacing or choose a more condensed/scaled rendering to fit.
ctx.strokeText('A long heading', 20, 70, 220);Text outline styling Top ↑
strokeStyle controls the outline paint and lineWidth controls its thickness. Very large line widths can make smaller text difficult to read.
Accessibility Top ↑
Outlined Canvas text remains bitmap content. Keep meaningful text available as semantic HTML and use Canvas text mainly when raster drawing is actually required.
Frequently asked questions Top ↑
What color does strokeText() use? Top ↑
It uses the current strokeStyle.
Does lineWidth affect strokeText()? Top ↑
Yes. lineWidth controls the thickness of the glyph outlines.
Can strokeText() use gradients? Top ↑
Yes. strokeStyle can be a CanvasGradient or CanvasPattern as well as a CSS color.
Does strokeText() change the current path? Top ↑
No. It draws directly without adding the text outlines to the current path.
Can I use fillText() and strokeText() together? Top ↑
Yes. Draw the same text at the same coordinates to create filled text with an outline.
Related Canvas text tutorials Top ↑
fillText() | strokeStyle | lineWidth | font | textBaseline | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
