JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<!--[if lt IE 9]><script src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->

JavaScript

// open your console
var canvas = document.createElement('canvas');

// http://code.google.com/p/explorercanvas/wiki/Instructions#Dynamically_created_elements
if (!canvas.getContext) G_vmlCanvasManager.initElement(canvas);

var ctx = canvas.getContext('2d');
canvas.width = 1;
canvas.height = 1;

// for simplicity, assume the input is in rgba format
function createPixel(r, g, b, a) {
    ctx.fillStyle = 'rgba(' + [r,g,b,a].join() + ')';
    ctx.fillRect(0,0,1,1);
    // 'data:image/png;base64,'.length => 22
    return canvas.toDataURL('image/png','').substring(22);
}

console.log(createPixel(50,75,100,1));