jorgecid
3/10/2013 - 1:47 AM

2x Rez, no floor

2x Rez, no floor

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
//document.getElementById("console").innerHTML = "debug";
var red = 0;
var green = 0;
var blue = 255;
 
canvas = document.getElementById('mrcanvas')
ctx = canvas.getContext('2d');
 
var numberSquares = 30;
var cw = canvas.width;
var ch = canvas.height;
var sizeSquares = 13;
var spacing = (cw - (numberSquares*sizeSquares)) / (numberSquares+1); // +1 for left margin
var lineHeight = 48;
//spacing += sizeSquares;
 
document.onmousemove = function (e) {
	normX = e.clientX/document.width;
	red = Math.floor(normX * 255);
	normY = e.clientY/document.height;
	green = Math.floor(normY * 255);
	blue = Math.floor(normX *128+ normY * 128)

	
	for (var i = 0; i < numberSquares; i++){
		for (var j = 0; j < numberSquares; j++){
			ctx.fillStyle = "rgb("+ red +", "+green+","+ blue +")";
			ctx.fillRect (
			spacing+(spacing+sizeSquares)*i   ,
			spacing+(spacing+sizeSquares)*j, sizeSquares, sizeSquares);		
	}	
			}
					ctx.fillStyle = "rgb(255,255,555)";
			ctx.font = "20px Helvetica";  		
		
		for (var i = 0; i < numberSquares; i++){		
		for (var j = 0; j < numberSquares; j++){	
			ctx.fillText(spacing+(spacing+sizeSquares)*i +" . "+spacing+(spacing+sizeSquares)*j  , 
			spacing+(spacing+sizeSquares)*i  , spacing+(spacing+sizeSquares)*i  );
			}	
			}
			
			ctx.font = "48px Helvetica";  	ctx.fillText("cw "+cw+" . ch "+ch , 0, ch/2);
	ctx.fillText("document.width " + document.width + "document.height " + document.height, 0,ch/2+ lineHeight);
	//ctx.fillText("normX " + normX + "normY " + normY, 0,ch/2+ lineHeight*2);



	//document.getElementById('wrapper').style.transform="rotateY(45deg)"
}
<!-- content to be placed inside <body>…</body> -->
<div style="width:100%; height:100%;">
<div id="wrapper" style="position:relative; left:50%; top:50%; width:500px; height:500px;">
<canvas id="mrcanvas" width=1000 height=1000 style="position: relative;  background-color:#000; left:-250px; top:-250px; width:500px; height:500px; "></canvas>
</div>
</div>
/**
 * 2x Rez, no floor
 */

background: #333;
margin:0;
padding:0;
overflow:hidden;