Alekzandero/!resuilts.md

## !resuilts.md

      
    Raw
  

              !resuilts.md
            
          
    With click handlers


5k rows takes <1s.330MB!
10k rows takes <2s, 700MB!!


## table.html
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>canvas test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            var canvas;

            var PIXEL_RATIO = (function () {
                var ctx = document.createElement("canvas").getContext("2d"),
                    dpr = window.devicePixelRatio || 1,
                    bsr = ctx.webkitBackingStorePixelRatio ||
                          ctx.mozBackingStorePixelRatio ||
                          ctx.msBackingStorePixelRatio ||
                          ctx.oBackingStorePixelRatio ||
                          ctx.backingStorePixelRatio || 1;

                return dpr / bsr;
            })();

            function createHiDPICanvas(w, h, ratio) {
                if (!ratio) {
                    ratio = PIXEL_RATIO;
                }
                var can = document.createElement("canvas");
                can.width = w * ratio;
                can.height = h * ratio;
                can.style.width = w + "px";
                can.style.height = h + "px";
                can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
                return can;
            }


            function getCursorPosition(e) {
                var x;
                var y;
                if (e.pageX != undefined && e.pageY != undefined) {
                    x = e.pageX;
                    y = e.pageY;
                } else {
                    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                }
                x -= canvas.offsetLeft;
                y -= canvas.offsetTop;
                return "x: " + x + ", y: " + y;
            }

            function draw(canvas, i) {
                var context = canvas.getContext("2d");
                for (var x = 0.5; x < canvas.width; x += 10) {
                  context.moveTo(x, 0);
                  context.lineTo(x, canvas.height);
                }
                for (var y = 0.5; y < canvas.height; y += 10) {
                  context.moveTo(0, y);
                  context.lineTo(canvas.width, y);
                }

                // actually draw the "pencil lines"
                context.strokeStyle = "#eee";
                context.stroke();

                context.font = "12px sans-serif";
                // actually draw the text
                for (var y = 50; y < canvas.height; y += 20, i++) {
                    context.fillText(i, 20, y);
                    context.fillText("2014-02-28 16:27:05", 100, y);
                    context.fillText("test_team/stress_soak/test.py", 300, y);
                    context.fillText("0da0fec", 500, y);
                    context.fillText("0", 700, y);
                }
                return i;
            }
            function canvasOnClick(e) {
                alert(getCursorPosition(e));
            }

            $(function() {
                var ROWS_PER_CANVAS = 1500;
                var TOTAL_ROWS = 3000;
                var j = 0;
                for (var i = 0; i * ROWS_PER_CANVAS <= TOTAL_ROWS; i++) {
                    canvas = createHiDPICanvas(800, 30000);
                    canvas.addEventListener("click", canvasOnClick, false);
                    $("body").append(canvas);
                    j = draw(canvas, j);
                }
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>canvas test</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript">
	var canvas;

	var PIXEL_RATIO = (function () {
	var ctx = document.createElement("canvas").getContext("2d"),
	dpr = window.devicePixelRatio \|\| 1,
	bsr = ctx.webkitBackingStorePixelRatio \|\|
	ctx.mozBackingStorePixelRatio \|\|
	ctx.msBackingStorePixelRatio \|\|
	ctx.oBackingStorePixelRatio \|\|
	ctx.backingStorePixelRatio \|\| 1;

	return dpr / bsr;
	})();

	function createHiDPICanvas(w, h, ratio) {
	if (!ratio) {
	ratio = PIXEL_RATIO;
	}
	var can = document.createElement("canvas");
	can.width = w * ratio;
	can.height = h * ratio;
	can.style.width = w + "px";
	can.style.height = h + "px";
	can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
	return can;
	}


	function getCursorPosition(e) {
	var x;
	var y;
	if (e.pageX != undefined && e.pageY != undefined) {
	x = e.pageX;
	y = e.pageY;
	} else {
	x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
	y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	x -= canvas.offsetLeft;
	y -= canvas.offsetTop;
	return "x: " + x + ", y: " + y;
	}

	function draw(canvas, i) {
	var context = canvas.getContext("2d");
	for (var x = 0.5; x < canvas.width; x += 10) {
	context.moveTo(x, 0);
	context.lineTo(x, canvas.height);
	}
	for (var y = 0.5; y < canvas.height; y += 10) {
	context.moveTo(0, y);
	context.lineTo(canvas.width, y);
	}

	// actually draw the "pencil lines"
	context.strokeStyle = "#eee";
	context.stroke();

	context.font = "12px sans-serif";
	// actually draw the text
	for (var y = 50; y < canvas.height; y += 20, i++) {
	context.fillText(i, 20, y);
	context.fillText("2014-02-28 16:27:05", 100, y);
	context.fillText("test_team/stress_soak/test.py", 300, y);
	context.fillText("0da0fec", 500, y);
	context.fillText("0", 700, y);
	}
	return i;
	}
	function canvasOnClick(e) {
	alert(getCursorPosition(e));
	}

	$(function() {
	var ROWS_PER_CANVAS = 1500;
	var TOTAL_ROWS = 3000;
	var j = 0;
	for (var i = 0; i * ROWS_PER_CANVAS <= TOTAL_ROWS; i++) {
	canvas = createHiDPICanvas(800, 30000);
	canvas.addEventListener("click", canvasOnClick, false);
	$("body").append(canvas);
	j = draw(canvas, j);
	}
	});
	</script>
	</body>
	</html>