JSFiddle - React, Tailwind, and code Playground

by Kai

JavaScript

(function (window, document) {
    
    var canvas = document.createElement('canvas'),
        c = canvas.getContext('2d'),
        WIDTH = canvas.width = window.innerWidth,
        HEIGHT = canvas.height = window.innerHeight,
        radius = 200,
        fps = 33;
    
    // Resize canvas automatically
    window.addEventListener('resize', function () {
        WIDTH = canvas.width = window.innerWidth;
        HEIGHT = canvas.height = window.innerHeight;
    });
    
    // Capture canvas clicks
    canvas.addEventListener('click', function (e) {
        if (inCircle(e)) {
            var pos = getMousePos(e);
            
            if (pos.x < WIDTH/2 && pos.y < HEIGHT/2) {
                alert('green!');
            }
            
            if (pos.x > WIDTH/2 && pos.y < HEIGHT/2) {
                alert('red!');
            }

            if (pos.x < WIDTH/2 && pos.y > HEIGHT/2) {
                alert('yellow!');
            }
            
            if (pos.x > WIDTH/2 && pos.y > HEIGHT/2) {
                alert('blue!');
            }            
        }   
    });
    
    document.body.appendChild(canvas);
    
    function getMousePos(e) {
        var x, y;
        
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        
        return {
            x: x -= canvas.offsetLeft,
            y: y -= canvas.offsetTop
        };
    }
    
    function inCircle (e) {
        var pos = getMousePos(e),
            dx = pos.x - WIDTH/2,
            dy = pos.y - HEIGHT/2,
            distance = (dx * dx + dy * dy);
        
        if (distance <= (radius * radius)) {
            return true;
        }
        
        return false;
    }
    
    function drawSimon (c) {
        c.clearRect(0, 0, WIDTH,...