JSFiddle - React, Tailwind, and code Playground

HTML

<div id='size1'></div>
<canvas id='canvas1'></canvas>
<div id='size2'></div>
<canvas id='canvas2' width='200' height='100'></canvas>

CSS

#canvas1 {
    width: 200px; height: 100px; border: 1px solid black
}
#canvas2 {
    border: 1px solid black
}

JavaScript

// Both canvas elements have the same size!


(function initCanvasRender() {
  var c = document.getElementById("canvas1");
  document.querySelector('#size1').innerHTML = "width: " + c.width + ", height: " + c.height;

  var ctx = c.getContext('2d');
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'black';
  ctx.font = '20px Times New Roman';
  ctx.fillText('hello...', c.width/2, c.height/2);
}());

(function initCanvasRender() {
  var c = document.getElementById("canvas2");
  document.querySelector('#size2').innerHTML = "width: " + c.width + ", height: " + c.height;

  var ctx = c.getContext('2d');
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'black';
  ctx.font = '20px Times New Roman';
  ctx.fillText('hello...', c.width/2, c.height/2);
}())