JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <canvas></canvas>
</div>
<button>Draw</button>

CSS

#parent {
  min-width: 100px;
  min-height: 100px;
  width: 100px;
  height: 100px;
  resize: both;
  overflow: scroll;
}

#parent > canvas {

  min-width: 80px;
  min-height: 80px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border:1px solid red;

}

JavaScript

var container = document.querySelector('#parent');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var button = document.querySelector('button');

button.addEventListener('click', draw );

function draw () {
    context.fillRect(0,0, canvas.width, canvas.height );
}