JSFiddle - React, Tailwind, and code Playground

by Sourabh Singh Rathore

HTML

<div>
    <input type="text" class="fromTime" value="3" />
    <br/>
    <input type="text" class="toTime" value="8" />
    <br/>
    <input type="button" class="drawButton" value="Draw Arc" />
    <input type="button" class="resetButton" value="Reset" />
</div>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

CSS

canvas {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
}

JavaScript

$(document).ready(function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "#4679bd";
    ctx.lineWidth = 3;
    ctx.stroke();

    $(".drawButton").on('click', button_Click);
    $(".resetButton").on('click', function () {
        var c = document.getElementById("myCanvas");
        var context = c.getContext("2d");
        context.clearRect(0, 0, c.width, c.height);
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.strokeStyle = "#4679bd";
        ctx.lineWidth = 3;
        ctx.stroke();
    });
});

function button_Click() {
    var startAngle = GetAngleFromTime($(".fromTime").val());
    var endAngle = GetAngleFromTime($(".toTime").val());
    DrawArc(startAngle, endAngle);
}

function DrawArc(startAngle, endAngle) {
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
    context.beginPath();
    context.arc(100, 100, 50, startAngle * (Math.PI / 180), endAngle * (Math.PI / 180));
    context.strokeStyle = "#FF0000";
    context.stroke();
}

function GetAngleFromTime(hour) {
    return hour * 30;
}