<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='400' height='400'></canvas>
<script>
var ctx = document.getElementById("output").getContext("2d");
ctx.font = "italic 12px sans-serif";
ctx.fillStyle = "red";
ctx.fillText("it's", 10, 10);
ctx.font = "bold 30px sans-serif";
ctx.fillStyle = "orange";
ctx.textAlign = "center";
ctx.fillText("SUNNY", 80, 50);
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = "italic 50px serif";
var p = ctx.measureText("outside");
ctx.fillStyle = "purple";
ctx.fillRect(50, 70, p.width, 50);
ctx.strokeStyle = "white";
ctx.strokeText("outside", 50, 70);
ctx.fillStyle = "black";
ctx.filter = "drop-shadow(0 1ex black)";
ctx.font = "italic bold 16px courier";
ctx.fillText("isn't it?", 10, 130);
</script>
</body>
</html>
Codebase Browser
chromium