<canvas id="world" width="300" height="300"></canvas>
<canvas id="dst" width="300" height="300"></canvas>
<script>
	var start = (new Date).getTime();

var canvasSrc = document.getElementById("world");
var canvasDst = document.getElementById("dst");
var contextSrc = canvasSrc.getContext("2d");
var contextDst = canvasDst.getContext("2d");

var width = canvasSrc.width;
var height = canvasSrc.height;

var lightX = 190;
var lightY = 120;
var step = 1;


contextSrc.fillStyle   = '#000';
contextSrc.strokeStyle = '#FFC';
contextSrc.lineWidth   = 1;
contextSrc.fillRect(0,0,width, height);

contextSrc.fillStyle = "#FF0000";
contextSrc.fillRect(25,25,100,100);


	contextSrc.strokeStyle = '#0EC';
	contextSrc.moveTo(50,0);
	contextSrc.lineTo(50,300);
	contextSrc.stroke();


	contextSrc.strokeStyle = '#0EC';
	contextSrc.moveTo(150,0);
	contextSrc.lineTo(150,300);
	contextSrc.stroke();


	contextSrc.strokeStyle = '#0EC';
	contextSrc.moveTo(250,0);
	contextSrc.lineTo(250,300);
	contextSrc.stroke();

function LineTo(c, ox, oy, dx, dy) {


	var imgData = c.getImageData(1,1,width, height);
	var pix = imgData.data;
	var minx = Math.min(ox,dx);
	var maxx = Math.max(ox,dx);
	var miny = Math.min(oy,dy);
	var maxy = Math.max(oy,dy);

	var i,j;

	for (i=minx; i<maxx; i+=5) {
		for (j=miny; j<maxy; j+=5) {
			pos = (width*i+j)*4;
			pix[pos] = 0xFF;
		}
	}

	c.putImageData(imgData,1,1);

}

var imgData = contextSrc.getImageData(1,1,width, height);
var pix = imgData.data;

var diff;
var angle = 60;
var torch_power = 50;
var ray_angle, angle;
var lightAngle = 360;
var angleStep = 120;
var x,y;


function trace(xa, xb, ya, yb) {

	var a  = (yb - ya) / (xb - xa);

		var tmp;
	if (xa > xb) {
		tmp = xb;
		xb = xa;
		xa = tmp;

		tmp = yb;
		yb = ya;
		ya = tmp;
	}

	a  = (yb - ya) / (xb - xa);

	for (var i = xa; i<xb; i++) {
		var posx = i;
		var posy = a * ( i - xb ) + yb;
		contextSrc.fillRect(posx, posy, 1,1);
	}

}

contextSrc.beginPath();
for (x=0; x<=lightAngle; x += (lightAngle/angleStep)) {
	ray_angle = angle/(Math.PI/180)-90-(lightAngle/2)+x;
	ray_angle = ray_angle*(Math.PI/180);
	cosray = Math.cos(ray_angle);
	sinray = Math.sin(ray_angle);
	for (y=1; y<=angleStep; y++) {

		//trace(lightX, lightY, lightX+(torch_power/angleStep*y)*cosray, lightY+(torch_power/angleStep*y)*sinray);

		contextSrc.moveTo(lightX, lightY);
		contextSrc.lineTo(lightX+(torch_power/angleStep*y)*cosray, lightY+(torch_power/angleStep*y)*sinray);

		//LineTo(context, lightX, lightY, lightX+(torch_power/angleStep*y)*cosray, lightY+(torch_power/angleStep*y)*sinray);

	}
	diff = (new Date).getTime() - start;
	//console.log(diff);
}
diff = (new Date).getTime() - start;
contextSrc.stroke();
diff = (new Date).getTime() - start;
//console.log(diff);
//contextSrc.closePath();


contextSrc.fillStyle = "#00F0FF";

/*
contextSrc.fillRect(xa, ya, 10,10);
contextSrc.fillRect(xb, yb, 10,10);
*/
//LineTo(context, 10,10 ,1000,1000);

/*

// top
var a= lightY/ (lightX - i);
var i,j;
var curX, curY;
var color = 255;
for (i=0; i<lightX; i+=step) {
    a = lightY / (lightX - i );
    curX = lightX;
    for(j=lightX; j>0; j-- ) {
		curX = j;
		curY = Math.floor((curX-i)*a);
		pos = (width*curY+curX)*4;
		console.log(curX, curY);
		if(pix[pos] === 0xFF) {
			pix[pos] = 0x00;
			break;
		} else {
			pix[pos] = 0xFF;
		}
    }
}

//contextSrc.putImageData(imgData,1,1);
contextSrc.fillStyle = "#0000FFAA";
contextSrc.fillRect(25,25,100,100);
contextSrc.fillStyle = "#00FF00";
contextSrc.arc(lightX,lightY,10,0,Math.PI*2, true);
contextSrc.fill();


// right
for (i=0; i<height; i+=step) {
	contextSrc.beginPath();
	contextSrc.moveTo(lightX, lightY);
    	contextSrc.lineTo(width, i);
	contextSrc.stroke();
	contextSrc.closePath();
}

// bottom
for (i=0; i<width; i+=step) {
	contextSrc.beginPath();
	contextSrc.moveTo(lightX, lightY);
    	contextSrc.lineTo(i, height);
	contextSrc.stroke();
	contextSrc.closePath();
}

// left
for (i=0; i<width; i+=step) {
	contextSrc.beginPath();
	contextSrc.moveTo(lightX, lightY);
    	contextSrc.lineTo(0, i);
	contextSrc.stroke();
	contextSrc.closePath();
}

*/

function doit(a) {


var imgDataSrc = contextSrc.getImageData(1,1, width, height);
var pixSrc = imgDataSrc.data;

var imgDataDst = contextDst.getImageData(1,1, width, height);
var pixDst = imgDataDst.data;



start = (new Date).getTime();
step = 1;
centerX = width/2;
centerY = height/2;
cnt = 0;
for (j=1; j<height; j+=step) {

	for (i=1; i<width; i+=step) {

		cnt++;

		posX = i - centerX;
		posY = j - centerY;

		r = Math.floor(Math.sqrt(posX*posX + posY*posY))*2;
		//theta = Math.floor(Math.atan(posY/posX)*180);
		theta = Math.floor(Math.atan2(-posY,posX)*180/Math.PI) % 360;


		if (theta < 0) {
			theta += 360;
		}


		if (theta > 359) {
			console.log(r,theta);
			debugger;
		}
		if (theta < 0) {
			console.log(r,theta);
			debugger;
		}
		theta = theta / 360 * height;

		pos = (j-1)*width*4 + (i-1)*4;
		posSrc = (r-1)*width*4 + (theta-1)*4;

		pixDst[pos+0] = pixSrc[posSrc+0];
		pixDst[pos+1] = pixSrc[posSrc+1];
		pixDst[pos+2] = pixSrc[posSrc+2];
		pixDst[pos+3] = pixSrc[posSrc+3];

		//pixDst[i] = 125;

	}

}


console.log('end:', cnt);
contextDst.putImageData(imgDataDst,1,1);
diff = (new Date).getTime() - start;
console.log(diff);
}
doit(45);
</script>