How to add a border on HTML5 Canvas' Text?

Question

I can draw text using these code:

   myCanvas.fillStyle = "Red";

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

I want to add a border around "Some Text", any ideas on that?

Answer 1

What about

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

Answer 2

Use strokeText() and the strokeStyle. eg:

<canvas id="myc"></canvas>

<script>
    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();
</script>