JSFiddle - React, Tailwind, and code Playground

by kitsunde

HTML

<canvas id="wheel" data-src="http://shard4.1stdibs.us.com/archivesE/upload/8979/115/XXX_8979_1290189827_1.jpg" width="300" height="300" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

JavaScript

function Wheel(canvas, items) {
    var wheel = this;
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.ctx.translate(canvas.width / 2, canvas.height / 2);

    this.items = items;
    this.itemWidth = 360 / items;
    this.offset = this.itemWidth / 2;

    this.image = undefined;
    this.rotation = 0;

    this.spinning = false;
    this.stopping = false;
    this.stopBetween = undefined;

    (function () {
        var image = new Image();
        image.addEventListener("load", function () {
            wheel.image = image;
            wheel.draw();
            wheel.trigger("ready");
        });
        image.src = canvas.getAttribute("data-src");
    })();

    this.speed = 0;
    this.acceleration = 0.1;
    this.maxSpeed = 10;

    var eventHandlers = {};
    this.on = function (event, handler) {
        if (!eventHandlers[event]) {
            eventHandlers[event] = [];
        }
        eventHandlers[event].push(handler);
        return wheel;
    };
    this.trigger = function (event, handler) {
        var handlers = eventHandlers[event];
        if (!handlers) return;
        for (var i = 0; i < handlers.length; ++i) {
            handlers[i]();
        }
        return wheel;
    };

    this.move = function () {
        if (!wheel.spinning) {
            return wheel;
        }
        if (wheel.stopping) {
            if (this.speed >= 0) {
                this.speed -= this.acceleration;
                if (this.speed < 0) {
                    this.speed = 0;
                }
                if (this.speed === 0) {
                    this.stop();
                }
            }
        } else {
            if (this.speed < this.maxSpeed) {
                this.speed += this.acceleration;
                if (this.speed > this.maxSpeed) {
                    this.speed = this.maxSpeed;
                }
            }
        }
        this.rotation = (this.rotation + this.speed) % 360;
    };
    this.spin = function ()...