JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="180" height="180" id="button">
       
</canvas>

CSS

#button {
   border: 5px solid grey;            
 }
        
 #button.depressed {
     border: 5px ridge grey;
 }

JavaScript

$(function () {
    "use strict";

    var canvas = document.getElementById("button");
    var context = canvas.getContext("2d");
    var regularImage, fadedImage, angle, isAnimating;

    var loadImage = function (name, onload) {
        var image = new Image();
        image.onload = onload;
        image.src = name;
        return image;
    };

    var mouseToggle = function () {
        if(!isAnimating){
            $(canvas).toggleClass("depressed");
        }
    };

    var startCoolDown = function () {
        if (!isAnimating) {
            isAnimating = true;
            angle = 0;
            context.drawImage(fadedImage, 0, 0);
            setTimeout(coolDown, 20);
        }
    };

    var coolDown = function () {
        context.fillStyle = context.createPattern(
            regularImage, "no-repeat"
        );
        context.moveTo(90, 90);
        context.beginPath();
        context.arc(
            90, 90, 130, angle * Math.PI / 180,
            (angle + 5) * Math.PI / 180, false
        );
        context.lineTo(90, 90);
        context.fill();
        context.closePath();
        angle += 4;
        if (angle < 360) {
            setTimeout(coolDown, 20);
        } else {
            isAnimating = false;
        }
    };

    var regularImageLoaded = function () {
        context.drawImage(regularImage, 0, 0);
        $(canvas).click(startCoolDown);
        $(canvas).bind("mousedown mouseup", mouseToggle);
    };


    fadedImage = loadImage("http://odetocode.com/aimages/fireballbw.png");
    regularImage = loadImage("http://odetocode.com/aimages/fireball.png",
                             regularImageLoaded);
});