JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<head>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // translate context to center of canvas
        context.translate(canvas.width / 2, canvas.height / 2);

        // flip context horizontally
        context.scale(-1, 1);

        context.font = "10pt Calibri";
        context.textAlign = "center";
        context.fillStyle = "blue";
        context.fillText("CANVAS", 0, 0);
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>