JSFiddle - React, Tailwind, and code Playground

HTML

<div id='d1'>
    
    <canvas width="50" height="50"></canvas>
</div>

CSS

#d1{
    background:red;
    width:300px;
    height:300px;
}
#d2 {
    background:green;
    width:100px;
    height: 100px;
}
#d1{
    zoom: 5; -moz-transform: scale(5);
}

JavaScript

var cc = $('canvas')[0];
var c = cc.getContext('2d');
c.moveTo(0,0);
c.lineTo(50,50);
c.lineWidth = 0.2;
c.strokeStyle='black';
c.stroke();