draw_text.html

<!DOCTYPE html>
<html>
<head><title>Draw text</title></head>
<body>
<h3>Draw text 2022</h3>
<hr>
<canvas id="myCanvas" style="background-color:beige"width="500" height="400"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "blue";
    // font property for size and style
    for(var i=0; i<4; i++) {
    context.font = (10 + i*10) + "px forte";
    context.strokeText("Javascript is fun.", 10, 30+i*50);
    }
    // draw text contour only
    context.font = "italic 50px forte";
    context.strokeStyle = "magenta";
    context.lineWidth = 3;
    context.textAlign = "left";
    context.strokeText("Javascript is fun.", 50, 250);
    // text fill
    context.fillStyle = "green";
    context.textAlign = "right";
    context.fillText("Javascript is fun.", 490, 300);
</script> 
</body>
</html>