JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<!DOCTYPE html>  

<html>  
    <head>  
        <title>Canvas from scratch</title>  
        <meta charset="utf-8">  
    </head>  
    
    <body>  
        <canvas id="myCanvas" width="500" height="500">  
            <!-- Insert fallback content here -->  
        </canvas>  
    </body>  
</html>

JavaScript

$(document).ready(function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    ctx.fillStyle = "rgba(255, 255, 0, 0.2)";
    ctx.fillRect(50, 50, 100, 100);
    ctx.save();
    
    ctx.translate(100, 100);  
    
    ctx.shadowBlur = 4;  
    ctx.shadowColor = "rgba(0, 0, 0, 0.9)";  

    var gradient = ctx.createRadialGradient(0, 0, 0, 300, 300, 45);  
gradient.addColorStop(0, "rgb(0, 0, 0)");  
gradient.addColorStop(1, "rgb(255, 255, 255)");  
    ctx.fillStyle = gradient;
    ctx.scale(2, 2);  
    ctx.rotate(Math.PI/4); // Rotate 45 degrees (in radians)  
    ctx.fillRect(0, 0, 100, 100);  
    ctx.restore(); 
    
});