jorgecid
3/10/2013 - 1:55 AM

2x Rez & floor, text was still weird due to overlap, solved now

2x Rez & floor, text was still weird due to overlap, solved now

settings.json
content_copyfile_download
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
dabblet.js
content_copyfile_download
//document.getElementById("console").innerHTML = "debug";
var red = 0;
var green = 0;
var blue = 255;
 
canvas = document.getElementById('mrcanvas')
ctx = canvas.getContext('2d');
 
var numberSquares = 10;
var cw = canvas.width;
var ch = canvas.height;
var sizeSquares = 100;
//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 (
			sizeSquares*i   ,
			sizeSquares*j, sizeSquares, sizeSquares);		
	}	
			}
					ctx.fillStyle = "rgb(255,255,555)";
			ctx.font = "60px Helvetica";  		
		
		for (var i = 0; i < numberSquares; i++){		
		ctx.fillText(sizeSquares*i +" . "+ sizeSquares*i  , 			sizeSquares*i  , sizeSquares*i  );
			}
			
			ctx.font = "48px Helvetica";  	ctx.fillText("cw "+cw+" . ch "+ch , 0, ch/2);
	ctx.fillText("document.width " + document.width, 0,ch/2 + lineHeight);

	ctx.fillText("document.height " + 	document.height, 0, ch/2 + lineHeight*2);
	ctx.fillText("normX " + normX + "normY " + normY, 0,ch/2+ lineHeight*3);

	ctx.fillText("red " + red + " green " + green + " blue " + blue, 0,ch/2+ lineHeight*4);



	//document.getElementById('wrapper').style.transform="rotateY(45deg)"
}
dabblet.html
content_copyfile_download
<!-- 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>
dabblet.css
content_copyfile_download
/**
 * 2x Rez & floor, text was still weird due to overlap, solved now
 */

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