HTML5 Canvas Reference - strokeText()

The context.strokeText() function specifies the outline of text strokes to the canvas.

The color used to render the stroke is set in the context.strokeColor property.

The font used is set in the context.font property.

Browser compatibility


`strokeText()`	Yes	Yes	Yes	Yes	Yes

Javascript Syntax

The function call looks like:

strokeText([text],[x],[y],[maxWidth])

Parameter value

text - The text to render on the canvas.
x - The x position of the text on the canvas.
y - The y position of the text on the canvas.
maxWidth - The maximum width of the text as rendered on the canvas.

Example

The following code uses default settings to draw text.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!-- w  w w  .  j  av  a2s .c o  m-->
    ctx.strokeText('Hello', 100, 100);

</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to draw text on image top.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
   <!--  w  ww.  j av a2 s  .  com-->
    var bg = new Image();
    bg.src = "http://www.java2s.com/style/download.png";
    bg.onload = function() {
        canvas.width  = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        process();
    };
    function process() {
        var x = 62;
        var y = 30;
        ctx.font         = "12px Arial";
        ctx.textBaseline = "top"; 
        ctx.fillStyle    = "white";
        ctx.strokeStyle  = "black";
        ctx.lineWidth    = 2;
        ctx.strokeText( "java2s.com", x, y );
        ctx.fillText( "java2s.com", x, y );    
    }
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to draw text outline.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   <!--  ww w  .  j  a v  a  2  s. c  om-->
    ctx.fillStyle = "#00F"; 
    ctx.strokeStyle = "#F00"; 
    ctx.font = "italic 30pt Arial"; 
    ctx.fillText("Fill text", 20, 50); 
    ctx.font = 'bold 30px sans-serif'; 
    ctx.strokeText("Stroke text", 20, 100); 
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set text outline color and fill color.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
<!-- w w  w.  ja v  a 2s.c om-->
    var can = document.getElementById('canvas');
    var ctx = can.getContext('2d');
    ctx.fillStyle = 'gray';
    ctx.fillRect(0,0,500,500);
    function drawStroked(text, x, y) {
        ctx.font = "80px Sans-serif"
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 8;
        ctx.strokeText(text, x, y);
        ctx.fillStyle = 'white';
        ctx.fillText(text, x, y);
    }
    drawStroked("java2s.com", 50, 150);
</script>
</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to draw text along circle.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var text = 'this is a test. this is a test'.split('').reverse().join(''),
    len = text.length,<!--from  w w w.  j av  a 2 s.co  m-->
  // The coverage of the circle
  angle = Math.PI * .7,
  centerX = 175,
  centerY = 20,
  radius = 200,
  context = document.getElementById('canvas').getContext('2d'),
  n = 0;
  // Format the text
  context.font = '40px Arial';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.strokeStyle = 'blue';
  context.lineWidth = 2;
  // Save the current state
  context.save();
  // Move our pointer
  context.translate(centerX, centerY-40);
  // Rotate
  context.rotate(-1 * angle / 2);
  context.rotate(-1 * (angle / len) / 2);
  // Loop over the string
  for(; n < len; n += 1) {
    context.rotate(angle / len);
    context.save();
    context.translate(0, -(-1 * radius));
    context.fillText(text[n], 0, 0);
    context.strokeText(text[n], 0, 0);
    context.restore();
  };
  // Restore the canvas state
  context.restore();
</script>
</body>
</html>

The code above is rendered as follows: