JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<canvas id="canvas" width="500" height="200"></canvas>
<a id="download" download="image.png" target="_blank">download</a>

CSS

html, body {
    margin: 0;
}

#canvas {
    margin: 20px auto;
    display: block;
}

#download {
    background: #78be54;
    font-size: 24px;
    padding: 20px;
    display: block;
    margin: 20px auto;
    text-align: center;
    cursor: pointer;
    color: #fff;
    width: 200px;
}

JavaScript

var canvas = document.querySelector( '#canvas' )
var anchor = document.querySelector( '#download' )
var ctx = canvas.getContext( '2d' )

canvas.height = 300
canvas.width = 600

for ( var i = 0; i < 200; i++ ) {
    var x = Math.random() * canvas.width
    var y = Math.random() * canvas.height
    var r = Math.random() * 70
    var c = Math.round( Math.random() * 0xFFFFFF )
    ctx.beginPath()
    ctx.globalAlpha = 0.8
    ctx.arc( x, y, r, 0, Math.PI * 2 )
    ctx.fillStyle = '#' + c.toString( 16 )
    ctx.fill()
}

var image = canvas.toDataURL()

anchor.setAttribute( 'href', image )