Rendering Text

HTML canvas demos

by pedro_g_s

HTML

<canvas id="myCanvas" width="600" height="600" />var

JavaScript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var fontSize = 10;

for (var i=5;i<=25;i+=5) { 
    var text = 'Canvas Text! ' + fontSize;
    ctx.font= fontSize + 'px Arial';
    var y = ctx.measureText(text).width;
    ctx.textAlign = "center";
    ctx.fillText(text,10,y, 3000);
    fontSize += 5;
}