JSFiddle - React, Tailwind, and code Playground

by icodeforlove

CSS

* {
    margin: 0;
    padding: 0;
}

JavaScript

function Canvas ($config) {
    this._loop = this._loop.bind(this);

    this.canvas = this._createCanvas($config.width, $config.height);
    document.body.appendChild(this.canvas);

    this.__poly = [
        {x: 350, y: 75},
        {x: 379, y: 161},
        {x: 469, y: 161},
        {x: 397, y: 215},
        {x: 423, y: 301},
        {x: 350, y: 250},
        {x: 277, y: 301},
        {x: 303, y: 215},
        {x: 231, y: 161},
        {x: 321, y: 161}
    ]; //[{"x":250,"y":0},{"x":279,"y":86},{"x":369,"y":86},{"x":397,"y":140},{"x":323,"y":226},{"x":250,"y":175},{"x":177,"y":226},{"x":203,"y":140},{"x":131,"y":86},{"x":221,"y":286}];
        
    
    this._anchor = this._getPolyBoundsAnchor(this.__poly);
    this._degrees = -17;
    
    this._color = '#999';
    
    this.canvas.addEventListener('mousemove', function (event) {
        this._color = this._isPointInPoly(this._poly, {x: event.x, y: event.y}) ? '#000' : '#999';
    }.bind(this));

    this._loop();
}

Canvas.prototype = {
    _loop: function () {
        this._draw();

        clearTimeout(this._timeout);
        this._timeout = window.setTimeout(this._loop, 1000 / 60);
    },

    _draw: function () {
        var canvas = this.canvas,
            context = canvas.context,
            poly = this._poly;

        this._degrees+=1;

        poly = this._poly = this.__poly.map(function (point) {
            return this._getRotatedPoint(point.x, point.y, this._anchor.x, this._anchor.y, this._degrees);
        }, this);

        context.clearRect(0, 0, canvas.width, canvas.height);                
        context.beginPath();
        context.moveTo(poly[0].x, poly[0].y);

        poly.forEach(function (point, key) {
            if (key) context.lineTo(point.x,point.y);
        });

        context.lineTo(poly[0].x, poly[0].y);
        context.closePath();
        context.fillStyle = this._color;
        context.fill();
    },

    _createCanvas: function (width, height) {
        var canvas =...