Cannot draw text in javascript

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...

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