JSFiddle - React, Tailwind, and code Playground

by dsbonev

HTML

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">    
    var outerCircle = new Path.Circle(new Point(24, 24), 23);
    outerCircle.style = {
        fillColor: 'blue',
        strokeColor: 'black',
        strokeWidth: 1.5
    };
    outerCircle.fillColor.alpha = 0;
    outerCircle.strokeColor.alpha = 1;
    
    var innerCircle = new Path.Circle(new Point(24, 24), 20);
    innerCircle.style = {
        fillColor: 'black',
        strokeColor: 'white',
        strokeWidth: 5
    };
     
    innerCircle.fillColor.alpha = 0.5;
    innerCircle.strokeColor.alpha = 1;
    
    var innerCircle2 = new Path.Circle(new Point(24, 24), 17);
    
    innerCircle2.style = {
        fillColor: 'yellow',
        strokeColor: 'black',
        strokeWidth: 1.5
    };
    
    innerCircle2.fillColor.alpha = 0;
    innerCircle2.strokeColor.alpha = 0.7;
    
    var topLeft = new Point(12, 20);
    var rectSize = new Size(24, 7.5);
    var rect = new Path.RoundRectangle(new Rectangle(topLeft, rectSize), new Size(2.5, 2.5));
    rect.fillColor = 'white';
    
    var clonedRect = rect.clone();
    clonedRect.rotate(90);
</script>
<a href="#" download>Download</a>
<canvas id="myCanvas" resize></canvas>

JavaScript

document.querySelector('a').addEventListener('mouseover', function () {
    this.href = document.querySelector('canvas').toDataURL();
}, false);