JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<canvas width="200" height="200"></canvas>

CSS

canvas{
    border:1px solid #333;
}

JavaScript

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
function angleToRadian(angle){
	return -angle*(Math.PI/180);
}
function drawArc(ctx, cx, cy, r, startAngle, endAngle, strokeWidth, strokeColor){
	ctx.beginPath();
    startAngle = angleToRadian(startAngle);
    endAngle = angleToRadian(endAngle);
    ctx.arc(cx, cy, r, startAngle, endAngle);
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.stroke();
    ctx.closePath();
}
drawArc(ctx, 100, 100, 50, 0, 360, 5, "#333"); // circle
drawArc(ctx, 100, 100, 50, 90, 0, 5, "red"); // arc