JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

JavaScript

var canvas = document.querySelectorAll('canvas')[0];
console.log('before setting styles up', canvas.width, canvas.height);
console.log('before setting styles up', canvas.style.width, canvas.style.height);
canvas.style.width = '500px';
canvas.style.height = '500px';
console.log('after setting styles up', canvas.width, canvas.height);
console.log('after setting styles up', canvas.style.width, canvas.style.height);
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.style.border = '5px solid green';
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 10, 10);
console.log('1:', canvas.width, canvas.height, canvas.style.width, canvas.style.height);

var canvas2 = document.querySelectorAll('canvas')[1];
canvas2.style.border = '5px solid yellow';
canvas2.width = 500;
canvas2.height = 500;
canvas2.style.width = '500px';
canvas2.style.height = '500px';
var ctx2 = canvas2.getContext('2d');
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
ctx2.fillStyle = 'red';
ctx2.fillRect(10, 10, 10, 10);
console.log('2:', canvas2.width, canvas2.height, canvas2.style.width, canvas2.style.height);

var canvas3 = document.querySelectorAll('canvas')[2];
canvas3.style.border = '5px solid purple';
canvas3.width = 500;
canvas3.height = 500;
var ctx3 = canvas3.getContext('2d');
ctx3.fillRect(0, 0, canvas3.width, canvas3.height);
ctx3.fillStyle = 'red';
ctx3.fillRect(10, 10, 10, 10);
console.log('3:', canvas3.width, canvas3.height, canvas3.style.width, canvas3.style.height);

var canvas4 = document.querySelectorAll('canvas')[3];
canvas4.style.border = '5px solid grey';
canvas4.style.width = '500px';
canvas4.style.height = '500px';
var ctx4 = canvas4.getContext('2d');
ctx4.fillRect(0, 0, canvas4.width, canvas4.height);
ctx4.fillStyle = 'red';
ctx4.fillRect(10, 10, 10, 10);
console.log('4:', canvas4.width, canvas4.height, canvas4.style.width, canvas4.style.height);