JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<canvas id="canvas" width=400 height=300></canvas>

CSS

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

JavaScript

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

            // define the donut
            var cX = Math.floor(canvas.width / 2);
            var cY = Math.floor(canvas.height / 2);
            var radius = Math.min(cX, cY) * .75;

            // the datapoints
            var data = [];
            data.push(67.34);
            data.push(28.60);
            data.push(1.78);
            data.push(.84);
            data.push(.74);
            data.push(.70);

            // colors to use for each datapoint
            var colors = [];
            colors.push("teal");
            colors.push("rgb(165,42,42)");
            colors.push("purple");
            colors.push("green");
            colors.push("cyan");
            colors.push("gold");

            // track the accumulated arcs drawn so far
            var totalArc = 0;

            // draw a wedge
            function drawWedge2(percent, color) {
                var arcRadians = percent / 100 * 360 * Math.PI / 180;
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(cX, cY);
                ctx.arc(cX, cY, radius, totalArc, totalArc + arcRadians, false);
                ctx.closePath();
                ctx.fillStyle = color;
                ctx.fill();
                ctx.restore();
                totalArc += arcRadians;
            }

            // draw the donut one wedge at a time
            function drawDonut() {
                for (var i = 0; i < data.length; i++) {
                    drawWedge2(data[i], colors[i]);
                }
                // cut out an inner-circle == donut
                ctx.beginPath();
                ctx.moveTo(cX, cY);
                ctx.fillStyle = gradient;
                ctx.arc(cX, cY, radius * .60, 0, 2 * Math.PI, false);
                ctx.fill();
            }

            // draw the background gradient
            var gradient = ctx.createLinearGradient(0, 0,...