How can I write text on a HTML5 canvas element?

Question

Is it possible to write text on HTML5 canvas?

Answer 1

var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);

#my-canvas {
  background: #FF0;
}

<canvas id="my-canvas" width="200" height="120"></canvas>

Answer 2

Drawing text on a Canvas

Markup:

<canvas id="myCanvas" width="300" height="150"></canvas>

Script (with few different options):

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

Check out the MDN documentation and this JSFiddle example.

Answer 3

Canvas text support is actually pretty good - you can control font, size, color, horizontal alignment, vertical alignment, and you can also get text metrics to get the text width in pixels. In addition, you can also use canvas transforms to rotate, stretch and even invert text.