JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<ul id="controls">
    <li><a href="javascript:void(0)" onclick="Logo.forward(10)">Move forward 10</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.forward(50)">Move forward 50</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.rotate(15)">Rotate Right (15 deg)</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.rotate(-15)">Rotate Left (-15 deg)</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.rotate(90)">Turn Right (90 deg)</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.rotate(-90)">Turn Left (-90 deg)</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.changeColor('red')">Color Red</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.changeColor('blue')">Color Blue</a></li>
    <li><a href="javascript:void(0)" onclick="Logo.changeColor('white')">Color White</a></li>
</ul>

<canvas width="500" height="500" id="drawSurface"></canvas>


<img id="cat" style="display: none;" src=...

CSS

#drawSurface {
    margin: 10px;
    box-shadow: 0 0 5px;   
}

#cat {
    width: 49px;
    height: 32px;
    background-repeat: no-repeat;

}

JavaScript

window.Logo = (function(fps, canvasId, catId) {
    var catImg = document.getElementById(catId),
        canvas = document.getElementById(canvasId),
        ctx = canvas.getContext('2d'),
        delay = 1000 / fps,
        history = [],
        queue = []
    ;
    
    var draw = function () {
        var i;
        
        ctx.fillColor = "black";
        ctx.strokeStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);   
        if(queue.length > 0) { //pop next step from queue
            history.push(queue.splice(0, 1)[0]);                  
        }
        ctx.save();
        ctx.lineWidth = 2;
        ctx.translate(250, 250);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for(i=0; i<history.length; i++) { //play back history
            history[i]();
        }
        ctx.stroke();  
        ctx.drawImage(catImg, 0, -9); //draw Nayncat.
        ctx.restore();
        setTimeout(draw, delay);
    };
  
        
    var forward = function (dist) {
        var i, dir = (dist >= 0) ? 1 : -1;
            fwd = function() {
                ctx.lineTo(dir, 0);
                ctx.translate(dir, 0);
            };
        
        for(i=0; i<Math.abs(dist); i++) {
            queue.push(fwd);             
        }
    };
    
    var rotate = function (deg) {
        deg = 3 * (0 | deg / 3);
        var i, step = (Math.PI * 3 / 180),
            dir = (deg >= 0) ? step : -step;
            rot = function() { ctx.rotate(dir, 0); };
        
        for(i=0; i<Math.abs(deg); i+=3) {
            queue.push(rot);             
        }
    };
    
    var changeColor = function (color) {
        queue.push(function() {
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.strokeStyle = color;
        });            
    };
    
    draw(); //begin animationloop.
        
    return {
        forward : forward,
        rotate : rotate,
        changeColor : changeColor
    };
}(60,...