JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<img id="image" src="#"/>

CSS

body {margin: 0; background: #000}
img {display: none}

JavaScript

// hack
var script = document.createElement('script');
script.src = 'https://rawgit.com/icodeforlove/9af9819e8e53fd2c03a0/raw/c7af141f8f4a187c9acd201b048508817e04280a/image.js';
document.body.appendChild(script);

var image = document.querySelector('img');

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');
document.body.appendChild(canvas);

function SnakePositioning (w, h) {
	this.w = w;
	this.h = h;
}
SnakePositioning.prototype = {
	getPositionForIndex: function (index) {
		var x = Math.floor(index/this.h),
			y = index - (x * this.h);

		if (x % 2 == 1) {
			y = this.h - y - 1;
		}

		return {x: x, y: y};
	}
};

function SimplePixelGrid (w, h, fill) {
	this.width = w;
	this.height = h;
	this.data = [];
	this.changes = [];
	this.recordingChanges = false;

	if (!fill)	{
	this.each(function (x, y) {
		this.set(x, y, {r: 0, g: 0, b: 0, a: 0});
		});
	} else {
	this.each(fill);
	}
}
SimplePixelGrid.prototype = {
	startChanges: function () {
		this.recordingChanges = true;
	},
	stopChanges: function () {
		this.recordingChanges = false;
	},
	clearChanges: function () {
		this.changes = [];
	},
	set: function (x, y, rgba) {
	if (!this.data[x]) {
		this.data[x] = [];
	}

	var previous = this.data[x][y];
		this.data[x][y] = rgba;
	
	if (this.recordingChanges && (!previous || previous.r != rgba.r || previous.g != rgba.g || previous.b != rgba.b || previous.a != rgba.a)) {
		this.changes.push({x:x, y:y, rgba:rgba});
	}
	},
	get: function (x, y) {
		if (!this.data[x] || !this.data[x][y]) {
		return null;
	} else {
		return this.data[x][y];
	}
	},
	each: function (func) {
	func = func.bind(this);
	
	for (var x = 0; x < this.width; x++) {
		for (var y = 0; y < this.height; y++) {
				func(x, y, this.get(x, y));
		}
	}
	},
	eachChanges: function (func) {
	func = func.bind(this);
	
	this.changes.forEach(function (change) {
		func(change.x, change.y, change.rgba);
	});
	},
	clone: function () {
	var self = this;
	return new...