Cannot draw text in javascript

Question

I am trying to display simple text on the screen via update() and setInterval() functions, but it's not working. Note that I create a canvas on which I want the text to be displayed. Please , check the code below.

var canvas, canvasContext;

window.onload = function() {
  canvas = document.getElementById('theCanvas');
  canvasContext = canvas.getContext('2d');

  var fps = 30;
  setInterval(update, 1000 / fps);

}

function update() {
  drawText();
}

function drawText() {
  canvasContext.fillStyle = 'black';
  canvasContext.font = 'bold 40px Monospace';
  canvasContext.fillText('POC ......', 150, 150);
}

#canvasHolder {
  position: absolute;
  left: 0px;
  top: 0px;
}
#theCanvas {
  background-color: lightgreen;
  width: 100pc;
  height: 100pc;
}

<div id="canvasHolder">
  <canvas id="theCanvas"></canvas>
</div>

in you set interval doesn't there need to be () after update like this: `setInterval(update(), 1000/fps);`? — Tristan, Jun 12 '16 at 08:20
@TristanT: No, that would in fact make it **stop** working. The OP is correctly passing a reference to the `update` function into `setInterval`. Your code would **call** the `update` function and pass its return value (`undefined`) into `setInterval`. — T.J. Crowder, Jun 12 '16 at 08:21
The text **is** being drawn. It's just really big. Scroll down and to the left, and you'll see the text. — T.J. Crowder, Jun 12 '16 at 08:22
I don't see the text.. I've changed the pixels to 10.. it's the same. Also , the text position should be x:150 , y:150 ,it should be drawn somewhere up and right. — Philip St, Jun 12 '16 at 08:30
@PhilipSt: It's there. :-) I've also posted an answer explaining why it shows up where it does and saying how to fix it. Note: (150, 150) is *down* and to the right, not *up* and to the right. — T.J. Crowder, Jun 12 '16 at 08:39

T.J. Crowder · Answer 1 · 2016-06-12T10:04:52.433

The issue is that the canvas is being stretched to fill the element. Both the canvas itself and the canvas element have a size. If you don't specify the size of the canvas (you haven't), it defaults to 300x150. When the size of the element and the canvas don't match, the canvas content is scaled to fit into the element.. So the text is being drawn, it's just really big; scroll to the right and down and you'll find it.

My guess is that you meant for the canvas and the element to be the same size. If so, you need to set the size of the canvas. You can do that with width and height attributes on the canvas element, but those values will be in pixels, not picas as in your CSS. So we do it dynamically by getting the computed width and height of the element (because they'll come back to us in pixels), and then setting those values for the width and height attributes of the canvas:

// Set the canvas size to match the element size
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

Updated snippet:

var canvas, canvasContext;

window.onload = function() {
  canvas = document.getElementById('theCanvas');
  // Set the canvas size to match the element size
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  canvasContext = canvas.getContext('2d');
  canvasContext.canvas.width = canvas.width;
  canvasContext.canvas.height = canvas.height;

  var fps = 30;
  setInterval(update, 1000 / fps);
};

function update() {
  drawText();
}

function drawText() {
  canvasContext.fillStyle = 'black';
  canvasContext.font = 'bold 40px Monospace';
  canvasContext.fillText('POC ......', 150, 150);
}

#canvasHolder {
  position: absolute;
  left: 0px;
  top: 0px;
}
#theCanvas {
  background-color: lightgreen;
  width: 100pc;
  height: 100pc;
}

<div id="canvasHolder">
  <canvas id="theCanvas"></canvas>
</div>

Note that right now, you're just redrawing it at the same location every time, but I assume moving it was your next task...

score 0 · Answer 2 · edited May 23 '17 at 10:29

The text is already rendered but if you want to animate your text then you have to change your draw function because each time you are drawing your text in the same position -

function drawText() {
  canvasContext.fillStyle = 'black';
  canvasContext.font = 'bold 40px Monospace';
  canvasContext.fillText('POC ......', 150, 150); //here you have given the fixed position.
}

and you have to clear your canvas before rendering your text in new position-

please refer -

How to clear the canvas for redrawing

Cannot draw text in javascript

2 Answers2