JSFiddle - React, Tailwind, and code Playground

by mrleroylee

HTML

<a href="" class="circle">
    <canvas id="myCanvas" width="30" height="30">
        <img class="eventsRightButton" src="http://www.multnomah.edu/images/home/orangeArrowLeft.gif" alt="Right">
    </canvas>
</a>

CSS

.circle:hover { opacity: .5; }

JavaScript

// Get a reference to the element.
var m = document.getElementById('myCanvas');

// Always check for properties and methods, to make sure your code doesn't break 
// in other browsers.
if (m && m.getContext) {
    // Get the 2d context.
    // Remember: you can only initialize one context per element.
    var c = m.getContext('2d');
    if (c) {
        // Draw a circle using the arc function.
        c.fillStyle = '#ff9302';
        c.shadowOffsetX = 0;
        c.shadowOffsetY = 0;
        c.shadowBlur = 2;
        c.shadowColor = "rgba(0, 0, 0, 0.5)";
        c.beginPath();
        // Arguments: x, y, radius, start angle, end angle, anticlockwise
        c.arc(15, 15, 13, 0, 360, false);
        c.fill();
        //Draw the white triangle
        c.fillStyle = '#fff';
        c.shadowBlur = 0;
        c.beginPath();
        c.moveTo(11, 8);
        c.lineTo(23, 15);
        c.lineTo(11, 22);
        c.lineTo(11, 7);
        c.fill();
    }
}