JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canv"></canvas>

CSS

#canv{
  width: 600px;
  height: 800px;
  background-color: blue;
}

JavaScript

/*
You can now just adjust the css values and the canvas
and the canvas scales accordingly.
*/

//Get Canvas
var canvas = document.getElementById("canv");

// Get computed style of the canvas element.
var cstyle = window.getComputedStyle(canvas);

// Returns the width as str in px: e.g. 600px.
// Parse resolves that issue.
canv.width = parseInt(cstyle.width);
canv.height = parseInt(cstyle.height);


// draw a rectangle to show that it works.
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,50,50);
console.log(ctx);