HTMLify

test.html
Views: 4 | Author: abh
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Text Example</title>
    <style>
        body {
            background: black
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>

    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        // Set font and fill style
        ctx.font = "30px Arial";
        ctx.fillStyle = "green";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        // Draw filled text
        ctx.fillText("Hello Canvas!", canvas.width / 2, canvas.height / 2);

        // Set font, stroke style, and line width for outlined text
        ctx.font = "20px Georgia";
        ctx.strokeStyle = "white";
        ctx.lineWidth = 1;
        ctx.textAlign = "left";
        ctx.textBaseline = "top";

        // Draw outlined text
        ctx.strokeText("Outlined Text", 10, 10);
    </script>
</body>
</html>
HTMLify

Share this file:

Comments
