How To Add A Border On HTML5 Canvas' Text?

I can draw text using the below code, myCanvas.fillStyle = 'Red'; myCanvas.font = '30pt Arial'; myCanvas.fillText('Some Text', 10, 30); But I want to add a border around 'Some Tex

Solution 1:

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>

Solution 2:

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>

Solution 3:

What about

myCanvas.style.border = "red 1px solid";