JSFiddle - React, Tailwind, and code Playground
JavaScript
(function (global, undefined) {
var requestAnimFrame = (function () {
var rate = 16;
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, rate);
}
})();
function fromColor(str) {
if (str[0] === "#") {
str = str.substr(1);
}
this.r = parseInt(str.substr(0, 2), 16);
this.g = parseInt(str.substr(2, 2), 16);
this.b = parseInt(str.substr(4, 2), 16);
this.a = 1;
}
/* new Color(int, int, int[, int]) or
* new Color(string)
*/
function Color(r, g, b, a) {
var source;
if (arguments.length === 1) {
if (typeof r === "string") {
fromColor.call(this, r);
return;
}
if (typeof r === "object") {
source = r;
r = source.r;
g = source.g;
b = source.b;
a = source.a;
}
}
this.r = r;
this.g = g;
this.b = b;
this.a = a === undefined ? 1 : a;
}
Color.prototype = {
toString: function () {
return "rgba(" +
this.r + "," +
this.g + "," +
this.b + "," +
this.a + ")";
}
};
// stolen from YUI3
function easeOut(t, start, delta, duration) {
return -delta *(t/=duration)*(t-2) + start;
}
function createCanvas(width, height, id) {
var canvas, context;
canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
if (id !== undefined) { canvas.id = id; }
...