Cursor test

by yonran

HTML

<p>Cursor test. Mouseover to see how your browser renders the cursor. Unfortunately, to be a self-contained file, these all use data: urls, which are unsupported in IE.

<div class=hascursor style="cursor:...

CSS

.hascursor {
    border:1px solid blue;
}

JavaScript

if (true) (function() {
	var canvas = document.createElement("canvas");
	canvas.width = canvas.height = 32;
	var c = canvas.getContext("2d");
	var grad = c.createLinearGradient(0,0,32,32);
	grad.addColorStop(0, 'blue');
	grad.addColorStop(1, 'rgba(0,255,0,0)');
	c.fillStyle = grad;
	c.fillRect(0,0,32,32);
	var imageData = c.getImageData(0, 0, canvas.width, canvas.height);
	addIconToBody(imageData, "gradient", 0, 0, false, "");
})();
if (true) (function() {
	var canvas = document.createElement("canvas");
	canvas.width = canvas.height = 32;
	var c = canvas.getContext("2d");
	var grad = c.createLinearGradient(32,32,0,0);
	grad.addColorStop(0, 'blue');
	grad.addColorStop(1, 'rgba(0,255,0,0)');
	c.fillStyle = grad;
	c.fillRect(0,0,32,32);
	var imageData = c.getImageData(0, 0, canvas.width, canvas.height);
	addIconToBody(imageData, "upsidedowngradient", 31, 31, false, "");
})();
if (true) (function() {
	var canvas = document.createElement("canvas");
	canvas.width = canvas.height = 32;
	var c = canvas.getContext("2d");
	var grad = c.createLinearGradient(0,0,32,0);
	grad.addColorStop(0, 'blue');
	grad.addColorStop(1, 'rgba(0,255,0,0)');
	c.fillStyle = grad;
	c.fillRect(0,0,32,32);
	var imageData = c.getImageData(0, 0, canvas.width, canvas.height);
	addIconToBody(imageData, "righttoleftgradient", 0, 0, false, "");
})();
if (true) (function() {
	var canvas = document.createElement("canvas");
	canvas.width = canvas.height = 32;
	var c = canvas.getContext("2d");
	var imageData = c.createImageData(32,32);
	for (var y = 0; y < 32; y++) {
		for (var x = 0; x < 32; x++) {
			imageData.data[4*(y*imageData.width + x) + 0] = 255;
			imageData.data[4*(y*imageData.width + x) + 1] = 255;
			imageData.data[4*(y*imageData.width + x) + 2] = 255;
			imageData.data[4*(y*imageData.width + x) + 3] = 0;
		}
	}
	for (var y = 0; y < 4; y++) {
		for (var x = 0; x < 4; x++) {
			imageData.data[4*(y*imageData.width + x) + 0] = 255;
			imageData.data[4*(y*imageData.width + x) + 1] =...