JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas {
    width: 75%;
    height: 75%;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var frame = 0;
var frame_counter = 1;
var draw_rainbow = function () {
    for (var i = 1; i <= 6; i++) {
        color_picker = i + frame;
        if (color_picker > 6) {
            color_picker -= 6;
        }
        switch (color_picker) {
            case 1:
                color = "red";
                break;
            case 2:
                color = "orange";
                break;
            case 3:
                color = "yellow";
                break;
            case 4:
                color = "green";
                break;
            case 5:
                color = "blue";
                break;
            case 6:
                color = "purple";
                break;
        }
        var x = canvas.width / 6 * (i - 1);
        var y = 0;
        var width = canvas.width / 6;
        var height = canvas.height;
        ctx.fillStyle = color;
        ctx.fillRect(x, y, width, height);
    }
};
var frame_update = function () {
    if (frame_counter >= 0) {
        frame++;
    }
    if (frame > 4) {
        frame -= 5;
    }
    frame_counter *= -1;
};

draw_rainbow();
frame_update();