How to add a border on HTML5 Canvas' Text?

Question

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 Text", any ideas on that?

Answer 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>

Answer 2

We can use method to draw border around the text or outline, and We can use 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>

Answer 3

关于什么

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