Come aggiungere un bordo su HTML5 Canvas 'Testo?

Question

Posso disegnare del testo usando il codice qui sotto,

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

Ma voglio aggiungere un bordo attorno a " Alcuni testi " ;, qualche idea al riguardo?

Answer 1

Usa strokeText () e strokeStyle. es:

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

Possiamo usare il metodo strokeStyle per disegnare il bordo attorno al testo o al contorno, e possiamo usare il metodo lineWidth per definire la larghezza della linea del tratto.          

 <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

Che dire di

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