CODEWITHSUNDEEP
javascripthtmlcanvas
Stuck on same problem
Stuck on same problem

Reputation: 23

How to get my text to show up In <canvas>

Im not looking for a straight up answer, but I would love some guidance on my issue. Currently I am attempting to display the text "HTML5 Canavs" in . Though my code looks correct in comparison with many different sites and my work book, all i see is the boarder of canvas without any text. I have used Firefox and Chrome yet both fail to display the text in canvas. Please let me know if I am missing something silly... I really appreciate any guidance! 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise 14.5</title>
</head>
<body>
<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas>
<script>
    var canvas = document.getElementById("text");
    var context = canvas.getContext("2d")

    context.fillStyle = "green";
    context.font = "bold 28px serif";
    context.textAlign = "center";
    context.fillText = ("HTML5 Canvas", 0, 0);
    context.shadowBlur = 6;
    context.shadowOffsetX = -2;
    context.shadowOffsetY = -5;
    context.shadowColor = "grey";
</script>
</body>
</html>

Upvotes: 1

Views: 124

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

There were a couple errors in your code:

  1. context.fillText = ("HTML5 Canvas", 0, 0); needs to instead be context.fillText("HTML5 Canvas", 0, 0); because it's a function.
  2. Since you've set context.textAlign = "center";, and since text draws above the coordinates you specify, your text was being drawn outside of the canvas. Change your fillText function to draw somewhere that's on the canvas.

Fixed (live) example:

var canvas = document.getElementById("text");
var context = canvas.getContext("2d")

context.fillStyle = "green";
context.font = "30px Arial";
context.textAlign = "center";
context.fillText("HTML5 Canvas", 200, 50);
context.shadowBlur = 6;
context.shadowOffsetX = -2;
context.shadowOffsetY = -5;
context.shadowColor = "grey";
<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas>

Upvotes: 1

Related Questions