Try it Yourself: Canvas Text

Canvas Text

<!DOCTYPE html>
<html>
<body>

<canvas id="textCanvas" width="400" height="160" style="border:1px solid #ccc;"></canvas>

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

ctx.font = "48px Arial";
ctx.fillStyle = "#222222";
ctx.fillText("Hello Canvas", 20, 60);

ctx.strokeStyle = "#e63946";
ctx.lineWidth = 2;
ctx.strokeText("Hello Canvas", 20, 120);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="textCanvas" width="400" height="160" style="border:1px solid #ccc;"></canvas>

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

ctx.font = "48px Arial";
ctx.fillStyle = "#222222";
ctx.fillText("Hello Canvas", 20, 60);

ctx.strokeStyle = "#e63946";
ctx.lineWidth = 2;
ctx.strokeText("Hello Canvas", 20, 120);
</script>

</body>
</html>