JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<canvas id="funfun" width="400" height="300"></canvas>
<a href="#" id="download" download="prettypicture">Download image</a>

CSS

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
body { padding: 5px; }    
canvas { border: solid 2px #777; }
a {
    display: block;
}

JavaScript

window.onload = function() {
    var canvas = document.getElementById('funfun');
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = "rgba(120,120,120,0.5)";
    ctx.fillStyle = "#F00"
    ctx.beginPath();
    ctx.arc(200, 150, 100, 0, Math.PI*2);   
    ctx.fill();
    
    for(var a = 0; a <= 5; a += 1) {
       ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
        var rads = a * (Math.PI/3);
        ctx.beginPath();
        var x = 200 + (50 * Math.cos(rads));
        var y = 150 - (50 * Math.sin(rads));
        ctx.arc (x, y, 50, 0, Math.PI*2);
        ctx.fill();
        ctx.stroke();
        ctx.fillStyle = "rgba(255, 255, 0, 0.15)";
        for(var b = 0; b<= 5; b += 1) {
            var rads = b * (Math.PI/3);
            ctx.beginPath();
            var x2 = x + (25*Math.cos(rads));
            var y2 = y - (25*Math.sin(rads));
            ctx.arc (x2, y2, 25, 0, Math.PI*2);
            ctx.fill();        
            
        }
    }
    document.getElementById('download').setAttribute('href', canvas.toDataURL());
};