JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script>[].map.call(document.scripts,function(e){})</script>

JavaScript

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    points = [],
    createPoint = function(_x,_y){
        var rect = this.getBoundingClientRect(),
            x = _x-rect.left,
            y = _y-rect.top;
        
        points.push(drawPoint(x,y));
    },
    drawPoint = function(x,y){
        ctx.beginPath();
        ctx.arc(x,y,3,0,7,false);
        ctx.stroke();  
        return [x,y];
    },
    rotateAnimation = function(){
        ctx.rotateY(Math.PI/180);
    },
    clickEvent = function(e){
        createPoint.call(canvas,e.pageX,e.pageY);
    };
document.body.appendChild(canvas);
addEventListener('click',clickEvent);
requestAnimationFrame(rotateAnimation);