JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <script type="text/javascript">
        function initDraw(){
            var canvas=document.getElementById("canvas");
            position(canvas, 25, 25);
            position(canvas, 125, 125);
            var from = {x: 75, y: 75}
            var to = {x: 150, y: 150}
            line(canvas, from, to);
        }

        function position(canvas, x, y){       
            if(!canvas.getContext){return;}
            var ctx=canvas.getContext("2d");
            ctx.save();
            ctx.translate(x, y);
            draw(ctx);
            ctx.restore();        
        }

        function draw(ctx){
            ctx.fillStyle = "green";
            ctx.fillRect(0, 0, 50, 50);
        }
    
        function line(canvas, from, to){
        var ctxt=canvas.getContext("2d");
        var imgData = ctxt.getImageData(0, 0, 500, 500);
        var pix = imgData.data;
        ctxt.save();
        ctxt.moveTo(from.x, from.y);
        for(var i=0; i<to.y/2; i++){
                var xCo = from.x + i,
                    yCo = from.y + i;
                ctxt.lineTo(xCo, yCo);
        }
        ctxt.stroke();
        ctxt.restore();
    }
    </script>
    </head>
    <body onload="initDraw();">
    <div style="height:100%; width:100%; overflow:auto;">
        <canvas id="canvas" height=500 width=500></canvas>
    </div>
    </body>
</html>