JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="wrapper">
<canvas id="canvas1" width="400" height="400"/>	
</div>

CSS

* {
	box-sizing: border-box;
}

.wrapper {
	background: red;
	border: 1px solid red;
	height: 300px;
	width: 100%;
}

canvas {
    border: 1px solid gray;
		height: 100%;
		object-fit: contain;
		width: 100%;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);