JSFiddle - React, Tailwind, and code Playground

by bnickel

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),
        lineCanvas = document.createElement('canvas'),
        catCanvas = document.createElement('canvas'),
        canvas = document.getElementById(canvasId),
        ctx = lineCanvas.getContext('2d'),
        catCtx = catCanvas.getContext('2d'),
        cmpCtx = canvas.getContext('2d'),
        delay = 1000 / fps,
        queue = []
    ;
    
    lineCanvas.width = canvas.width;
    lineCanvas.height = canvas.height;
    catCanvas.width = canvas.width;
    catCanvas.height = canvas.height;
    
    ctx.fillRect(0, 0, canvas.width, canvas.height);   
    ctx.translate(250, 250);
    ctx.fillColor = "black";
    ctx.strokeStyle = "white";
    ctx.lineWidth = 2;
    catCtx.fillRect(0, 0, canvas.width, canvas.height);   
    catCtx.translate(250, 250);
    
    var draw = function () {
        var i;
        
        ctx.beginPath();
        ctx.moveTo(0, 0);
        if(queue.length > 0) { //pop next step from queue
            queue.splice(0, 1)[0]();                  
        }
        ctx.stroke();  
        catCtx.drawImage(catImg, 0, -9); //draw Nayncat.
        
        cmpCtx.drawImage(lineCanvas, 0, 0);
        cmpCtx.drawImage(catCanvas, 0, 0);
        
        // Clear the cat context.
        catCtx.clearRect(-100, -100, 200, 200);
        setTimeout(draw, delay);
    };
  
        
    var forward = function (dist) {
        var i, dir = (dist >= 0) ? 1 : -1;
            fwd = function() {
                ctx.lineTo(dir, 0);
                ctx.translate(dir, 0);
                catCtx.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);
      ...