Drawing Text on Canvas
In this exercise you can learn the JavaScript methods and properties behind drawing text and text strokes on the canvas element.
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
// fillText(text, x, y, maxWidth )
// strokeText(text, x, y, maxWidth )
ctx.fillStyle = '#FC0';
ctx.font = 'italic bold 56px Arial, sans-serif';
ctx.fillText('Text On Canvas', 50, 50, 300);
ctx.textAlign = 'start'; // start, end, left, right, center
ctx.textBaseline = 'hanging'; // top, middle, bottom, hanging, alphabetic, ideographic
ctx.strokeText('Text On Canvas', 50, 50, 300);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>
</html>