JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

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

CSS

#canvas {
    width: 430px;
    height: 180px;
    background: #666;
    border-radius: 5px;
}

JavaScript

var canvas = document.getElementById("canvas");
canvas.width = 430;
canvas.height = 180;

var D0 =  3 / 8 * Math.PI * 2;
var D1 =  9 / 8 * Math.PI * 2;

var context = canvas.getContext("2d");
var value = 0;

function animate() {
    context.fillStyle = "#666";
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    drawKnob(value, 40, 40);    
    drawKnob(value, 90, 40); 
    drawKnob(value, 140, 40);
    drawKnob(value, 190, 40);
    drawKnob(value, 240, 40);    
    drawKnob(value, 290, 40); 
    drawKnob(value, 340, 40);
    drawKnob(value, 390, 40);
    
    drawKnob(value, 40, 90);    
    drawKnob(value, 90, 90); 
    drawKnob(value, 140, 90);
    drawKnob(value, 190, 90);
    drawKnob(value, 240, 90);    
    drawKnob(value, 290, 90); 
    drawKnob(value, 340, 90);
    drawKnob(value, 390, 90);
    
    drawButton(value === 0, 40, 140);    
    drawButton(value === 1, 90, 140); 
    drawButton(value === 2, 140, 140);
    drawButton(value === 4, 190, 140);
    drawButton(value === 8, 240, 140);    
    drawButton(value === 16, 290, 140); 
    drawButton(value === 32, 340, 140);
    drawButton(value === 64, 390, 140);
    
    requestAnimationFrame(animate);
}

function drawKnob(value, x, y) {
    var r = 20;
    var d0 = D0;
    var d1 = linlin(value, 0, 128, D0, D1);
    var dx = context.measureText(value).width / 2;
    
    // meter
    context.strokeStyle = "#999999";
    context.lineWidth = 1;
    context.beginPath();
    context.arc(x, y, r, D0, D1, false);
    context.stroke();    
    
    // knob
    context.strokeStyle = "#ffffff";
    context.lineWidth = 6;
    context.beginPath();
    context.arc(x, y, r, d0, d1, false);
    context.stroke();
    
    // label
    context.fillStyle = "#ffffff";
    context.fillText(value, (x - dx)|0, y + 20);
}

function drawButton(value, x, y) {
    var r = 20;
    var x1 = (x - r)|0;
    var y1 = (y - r)|0;
    
    context.fillStyle = value ? "#ffffff" : "#666666";
    context.fillRect(x1, y1, r *...