How to add a border on HTML5 Canvas' Text?
We can use strokeStyle method to draw border around the text or outline, and We can use lineWidth method to define the width of the stroke line.
var canvas = document.getElementById('Canvas01');
var ctx = canvas.getContext('2d');
ctx.strokeStyle= "red"; //set the color of the stroke line
ctx.lineWidth = 3; //define the width of the stroke line
ctx.font = "italic bold 35pt Tahoma"; //set the font name and font size
ctx.strokeText("StackOverFlow",30,80); //draw the text<canvas id="Canvas01" width="400" height="400" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>Use strokeText() and the strokeStyle. eg:
canvas = document.getElementById("myc");
context = canvas.getContext('2d');
context.fillStyle = 'red';
context.strokeStyle = 'black';
context.font = '20pt Verdana';
context.fillText('Some text', 50, 50);
context.strokeText('Some text', 50, 50);
context.fill();
context.stroke();<canvas id="myc"></canvas>