JSFiddle - React, Tailwind, and code Playground

by Jordan Stevenson

HTML

<body>
    <canvas id="myCanvas" width="250" height="250"></canvas>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#buttons {
    position: absolute;
    top: 5px;
    left: 10px;
}
#buttons > input {
    padding: 10px;
    display: block;
    margin-top: 5px;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

myDraw = function () {
    cxt.beginPath();
    cxt.arc(x, y, radius, 0, 2 * Math.PI, false);
    cxt.lineWidth = 14;
    cxt.fillStyle = "#999";
    cxt.fill();
    cxt.strokeStyle = "#000";
    cxt.stroke();

    cxt.beginPath();
    cxt.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    cxt.lineTo(x, y);

    // line color
    cxt.lineWidth = 15;
    cxt.strokeStyle = '#900';
    cxt.lineCap = "round";
    cxt.lineJoin = "miter";
    cxt.stroke();
};

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate() {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // update
    var startAngle = 0;//.1 * Math.PI;
    var endAngle = Math.PI;

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw stuff
    myDraw();

    // request new frame
    requestAnimFrame(function () {
        animate();
    });
}
animate();