/code/javascript/gradient.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="icon" src="/images/favicon.gif" />
		<title>gradient thing</title>
		<style type="text/css">
			* { margin: 0; padding: 0; border: 0; }
			html, body {
				height: 100%;
				width: 100%;
				background: #000;
				color: #fff;
			}
			html { display: table; }
			body { display: table-cell; vertical-align: middle; text-align: center; }
		</style>
	</head>
	<body>
		<canvas width="960px" height="600px">Y U no canvas?</canvas>
		<script type="text/javascript">
var ele = document.getElementsByTagName("canvas")[0];
var scr = ele.getContext("2d");
scr.imageSmoothingEnabled = false;
var rsz = document.createElement("canvas");
rsz.height = 200;
rsz.width = 320;
var ctx = rsz.getContext("2d");
var img = ctx.createImageData(rsz.width, rsz.height);
img.draw = function draw () {
	if (this.x > this.width - 1 || this.y > this.height - 1 || this.x < 0 || this.y < 0) {
		console.log("requested drawing off-canvas");
		return;
	}
	var p = 4 * (this.width * this.y + this.x);
	this.data[p + 0] = this.pixel.red;
	this.data[p + 1] = this.pixel.grn;
	this.data[p + 2] = this.pixel.blu;
	this.data[p + 3] = this.pixel.alpha;
}
for (img.y = 0; img.y < img.height; img.y++) {
	var c = 255 - 255 * img.y / img.height;
	for (img.x = 0; img.x < img.width; img.x++) {
		img.pixel = { red: 0, grn: 0, blu: c, alpha: 255 };
		img.draw();
	}
}
ctx.putImageData(img, 0, 0);
scr.drawImage(rsz, 0, 0, ele.width, ele.height);
		</script>
	</body>
</html>
download