Comment ajouter une bordure sur le texte de HTML5 Canvas?

Question

Je peux dessiner du texte en utilisant le code ci-dessous,

myCanvas.fillStyle = "Red";
myCanvas.font = "30pt Arial";
myCanvas.fillText("Some Text", 10, 30);

Mais je souhaite ajouter une bordure autour de "Some Text", des idées à ce sujet?

Answer 1

Utilisez strokeText () et le strokeStyle. , par exemple:

.

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

Nous pouvons utiliser la méthode strokeStyle pour tracer une bordure autour du texte ou du contour, et nous pouvons utiliser la méthode lineWidth pour définir la largeur de la ligne de trait.          

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

 </script>
</body>

Answer 3

Qu'en est-il de

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