jorgecid
3/10/2013 - 1:47 AM

Position via javascript didn't solve artifacts

Position via javascript didn't solve artifacts

settings.json
content_copyfile_download
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"javascript"}
dabblet.js
content_copyfile_download
//document.getElementById("console").innerHTML = "debug";
var red = 0;
var green = 0;
var blue = 0;
 
canvas = document.getElementById('mrcanvas')

canvas.style.position = "relative";
canvas.style.left = "256px";
canvas.style.top = "256px";
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 = 28;
//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 = "10px 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 = "24px Helvetica";  	ctx.fillText("cw "+cw+" . ch "+ch , 0, ch/2);
	ctx.fillText("dw " + document.width + "dh " + document.height, 0,ch/2+ lineHeight);
	//ctx.fillText("normX " + normX + "normY " + normY, 0,ch/2+ lineHeight*2);



	//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%;">
<canvas id="mrcanvas" width=512 height=512 style=" background-color:#000; width:512px; height:512px; "></canvas>
</div>
dabblet.css
content_copyfile_download
/**
 * Position via javascript didn't solve artifacts
 */

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