jviereck/print_test_page.html

## print_test_page.html
<html>
<style type="text/css">
  /**
   * Make the canvas take up the entier space
   * -> fills up the entire page when printing.
   */
  canvas {
    border:1px solid black;
    position:relative;
    top:0;
    left:0;
    width: 10cm;
    height:100%;
  }
</style>
<body>
<div>
<canvas id="page0" width="300px" height="300px"></canvas>
<canvas id="page1" width="300px" height="300px"></canvas>
</div>
<script>
    function setupCanvas(id, msg) {
      var canvas = document.getElementById(id);
      var ctx = canvas.getContext('2d');

      function render(ctx, blue) {
        ctx.fillStyle = blue ? 'blue' : 'red';
        ctx.fillRect(10, 10, 100, 100);
        ctx.fillStyle = 'black';

        var units = ['5mm', '10px', '10pt'];

        units.forEach(function(unit, idx) {
          ctx.font = unit + ' Arial'
          ctx.fillText(msg + ' (' + ctx.font + ')', 20, 50 + 20 * idx);
        });

        ctx.scale(0.5, 0.5);
        var imgData = ctx.getImageData(0, 0, 150, 150);
        ctx.putImageData(imgData, 151, 151);
      }

      canvas.mozPrintCallback = render;
      render(ctx, true);
    }

    setupCanvas('page0', 'Hello Open Web');
    setupCanvas('page1', 'Second page');

</script>
</body>
</html>
	<html>
	<style type="text/css">
	/**
	* Make the canvas take up the entier space
	* -> fills up the entire page when printing.
	*/
	canvas {
	border:1px solid black;
	position:relative;
	top:0;
	left:0;
	width: 10cm;
	height:100%;
	}
	</style>
	<body>
	<div>
	<canvas id="page0" width="300px" height="300px"></canvas>
	<canvas id="page1" width="300px" height="300px"></canvas>
	</div>
	<script>
	function setupCanvas(id, msg) {
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext('2d');

	function render(ctx, blue) {
	ctx.fillStyle = blue ? 'blue' : 'red';
	ctx.fillRect(10, 10, 100, 100);
	ctx.fillStyle = 'black';

	var units = ['5mm', '10px', '10pt'];

	units.forEach(function(unit, idx) {
	ctx.font = unit + ' Arial'
	ctx.fillText(msg + ' (' + ctx.font + ')', 20, 50 + 20 * idx);
	});

	ctx.scale(0.5, 0.5);
	var imgData = ctx.getImageData(0, 0, 150, 150);
	ctx.putImageData(imgData, 151, 151);
	}

	canvas.mozPrintCallback = render;
	render(ctx, true);
	}

	setupCanvas('page0', 'Hello Open Web');
	setupCanvas('page1', 'Second page');

	</script>
	</body>
	</html>