JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=350 height=100></canvas>

CSS

body {
    background-color: ivory;
    padding:20px;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


options = [{
    t: 1,
    speed: 50
}, {
    t: 2,
    speed: 90
}, {
    t: 3,
    speed: 10
}, {
    t: 4,
    speed: 25
}, {
    t: 5,
    speed: 36
}, ];

draw();

function draw() {

    // Clear canvas

    for (var i = 0; i < options.length; i++) {

        option = options[i];

        // Draw the metallic styled edge
        drawMetallicArc(option);

        // Draw thw background

        // Draw tick marks

        // Draw labels on markers
        drawTextMarkers(option);

        // Draw speeometer colour arc

        // Draw the needle and base

    }

}

function drawMetallicArc(option) {
    var y = 60;
    var radius = 15;
    var x = option.t * 50;

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.strokeStyle = "blue";
    ctx.stroke();
}

function drawTextMarkers(option) {
    var y = 60
    var radius = 15
    var top = y - radius - 5;
    var x = option.t * 50 - 5; // -5 for digit spacing
    ctx.fillText(option.speed, x, top);
}