Text created with context.fillText keep getting deformed in canvas

Question

I am trying to put a text inside of canvas. The HTML code of the canvas: <canvas id="leaderboard2" style="position: fixed; right: 1250px; top: 140px; width: 230px; height: 330px;"></canvas>. I tried using this code below to add the text "test" in the canvas, but the text keeps on getting deformed. This is what the output looks like (sorry, I know it is very had to see)

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

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Test", 100, 100 );

it's because of the right:1250px. out of screen. – Sato Takeru Jan 23 '21 at 03:01 — Sato Takeru, Jan 23 '21 at 03:01

score 0 · Answer 1 · answered Jan 23 '21 at 03:03

Because of right:1250px, your text draw out of screen.

<!DOCTYPE html>
<html>
<body>

<canvas id="leaderboard2" 
style="position: fixed; top: 140px; width: 230px; height: 330px;">
</canvas>

<script>
    var canvas = document.getElementById("leaderboard2");
    var context = canvas.getContext("2d");
    context.fillStyle = "blue";
    context.font = "bold 16px Arial";
    context.fillText("Test", 100, 100 );
</script>

</body>
</html>

Text created with context.fillText keep getting deformed in canvas

1 Answers1