JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="a" width="100" height="100"></canvas>
<img id="b" />

CSS

canvas{
    border:1px solid #000000;
    width:150px;
    height:150px;
    transform:scale(1.5,1.5);
    -webkit-transform:scale(1.5,1.5);
    -moz-transform:scale(1.5,1.5);
    margin:40px;
    zoom:1.1;
}
img{
    border:1px solid #000000;
}
}

JavaScript

var canvas = document.getElementById( 'a' );
var context = canvas.getContext( '2d' );
context.fillStyle = '#FF0000';
context.fillRect( 10, 10, 80, 80 );
context.beginPath( );
context.moveTo( 20, 20.5 );
context.lineTo( 80, 20.5 );
context.stroke( );

var img = document.getElementById( 'b' );
img.src = canvas.toDataURL( );