PenguinOfThunder/scrolltest.html

## scrolltest.html
<!DOCTYPE html>
<html>
  <head>
		<title>Canvas Image Test</title>
	<script language="JavaScript">
	var y;
	var d = 1; // scroll delta

	function scroll(ctx, dx, dy) {
		// grab most of the image data
		var oldImg = ctx.getImageData(dx, dy, ctx.canvas.width - dx, ctx.canvas.height - dy);
		// put it back one pixel to the left
		ctx.putImageData(oldImg, 0, 0);
	}

	function render(){
		var cv = document.getElementById('img');
		var ctx = cv.getContext('2d');

		if(!y || y < 0 || y > cv.height) {
			 y = Math.floor(cv.height/2);
		}
		y +=  Math.floor(5*Math.random())-2;

		scroll(ctx, d, 0);

		// Now draw something on the last column
		var buf = ctx.getImageData(cv.width - d, 0, d, cv.height);
		var p = buf.data;
		var c = 1;
		for(var r = 0 ; r < buf.height ; r++ ) {
			var o = 4*((r * buf.width) + c);
			var v;
			if(Math.abs(r - y) < 6) {
				v = 255 - (8*Math.abs(r-y));
			} else {
				if(r%16==0)
					v = 128;
				else
					v = 32;
			}
			p[o]   = 0;
			p[o+1] = v;
			p[o+2] = v;
			p[o+3] = 255; // alpha
		}
		ctx.putImageData(buf,cv.width -d ,0);
	}
</script>
<style>
body { background-color: black; color: white; }
#img { border: thin solid red; }
</style>
</head>
<body>
<canvas id="img" width="320" height="128">Your browser does not support canvas.</canvas>
<script>
setInterval(render, 50);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Canvas Image Test</title>
	<script language="JavaScript">
	var y;
	var d = 1; // scroll delta

	function scroll(ctx, dx, dy) {
	// grab most of the image data
	var oldImg = ctx.getImageData(dx, dy, ctx.canvas.width - dx, ctx.canvas.height - dy);
	// put it back one pixel to the left
	ctx.putImageData(oldImg, 0, 0);
	}

	function render(){
	var cv = document.getElementById('img');
	var ctx = cv.getContext('2d');

	if(!y \|\| y < 0 \|\| y > cv.height) {
	y = Math.floor(cv.height/2);
	}
	y += Math.floor(5*Math.random())-2;

	scroll(ctx, d, 0);

	// Now draw something on the last column
	var buf = ctx.getImageData(cv.width - d, 0, d, cv.height);
	var p = buf.data;
	var c = 1;
	for(var r = 0 ; r < buf.height ; r++ ) {
	var o = 4((r buf.width) + c);
	var v;
	if(Math.abs(r - y) < 6) {
	v = 255 - (8*Math.abs(r-y));
	} else {
	if(r%16==0)
	v = 128;
	else
	v = 32;
	}
	p[o] = 0;
	p[o+1] = v;
	p[o+2] = v;
	p[o+3] = 255; // alpha
	}
	ctx.putImageData(buf,cv.width -d ,0);
	}
	</script>
	<style>
	body { background-color: black; color: white; }
	#img { border: thin solid red; }
	</style>
	</head>
	<body>
	<canvas id="img" width="320" height="128">Your browser does not support canvas.</canvas>
	<script>
	setInterval(render, 50);
	</script>
	</body>
	</html>