HTML - textbaseline property in html5 canvas - tutorial

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy-HTML Canvas textBaseline</title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas textBaseline with example:</h1>
        <canvas id="wikitechyCanvas" width="600" height="300"
                style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var d = document.getElementById("wikitechyCanvas");
            var del = d.getContext("2d");

del.strokeStyle = "blue";
            del.moveTo(30, 150);
            del.lineTo(550, 150);
            del.stroke();

del.font = "25px Times New Roman"

del.textBaseline = "top";
            del.fillText("Top", 30, 150);
            del.textBaseline = "bottom";
            del.fillText("Bottom", 100, 150);
            del.textBaseline = "middle";
            del.fillText("Middle", 200, 150);
            del.textBaseline = "alphabetic";
            del.fillText("Alphabetic", 300, 150);
            del.textBaseline = "hanging";
            del.fillText("Hanging", 420, 150);
        </script>
    </body>
</html>

Result