JSFiddle - React, Tailwind, and code Playground

by noonat

HTML

<canvas id="canvas"></canvas>

CSS

body { background: #ccc; }

JavaScript

// Create a canvas and fill it with a color.
function fillCanvas(width, height, r, g, b, a, premultiply) {
    a /= 255.0;
    if (premultiply) {
      // Fake premultiply the color, as if it were loaded
      // from a pre-multiplied image/canvas pixel buffer.
      var inv = 1 / a;
      r = Math.floor(inv * Math.floor(r * a));
      g = Math.floor(inv * Math.floor(g * a));
      b = Math.floor(inv * Math.floor(b * a));
    }
    var tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = width;
    tmpCanvas.height = height;
    var tmpContext = tmpCanvas.getContext('2d');
    tmpContext.fillStyle = (
        'rgba(' + [r, g, b, a].join(',') + ')');
    console.log(tmpContext.fillStyle);
    tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
    return tmpCanvas;
}

function imageCanvas(src, callback) {
    var img = document.createElement('img');
    img.onload = function() {
        var tmpCanvas = document.createElement('canvas');
        tmpCanvas.width = img.width;
        tmpCanvas.height = img.height;
        var tmpContext = tmpCanvas.getContext('2d');
        tmpContext.drawImage(img, 0, 0);
        callback(tmpCanvas);
    };
    img.src = src;
}

var canvas = document.getElementById('canvas');
canvas.width = 384;
canvas.height = 256;
var context = canvas.getContext('2d');

var fill1 = fillCanvas(64, 128, 167, 22, 22, 1);
var fill2 = fillCanvas(64, 128, 167, 22, 22, 2);
var fill3 = fillCanvas(64, 128, 167, 22, 22, 1, true);
var fill4 = fillCanvas(64, 128, 167, 22, 22, 2, true);
imageCanvas('http://i.imgur.com/NSerS.png', function(image) {
    context.fillStyle = '#fff';
    context.fillRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < 100; ++i) {
        // Draw the normal colors.
        context.drawImage(fill1, 0, 0);
        context.drawImage(fill2, 64, 0);
        // Draw the fake pre-multiplied colors.
        context.drawImage(fill3, 0, 128);
        context.drawImage(fill4, 64, 128);
        // Draw the...