Costava/high-dpi-canvas.html

## high-dpi-canvas.html
<html>
  <head>
    <script src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
  </head>

  <body>
    <h2>Naive canvas</h2>
    <canvas id="naive" width="400" height="50"></canvas>

    <h2>High-def Canvas</h2>
    <canvas id="hidef" width="400" height="50"></canvas>
  </body>

  <script>
    $(document).ready(function() {

      // Output to Canvas without consideration of device pixel ratio
      var naiveContext = $('#naive')[0].getContext('2d');
      naiveContext.font = '16px Palatino';
      naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

      // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
      var hidefCanvas = $('#hidef')[0];
      var hidefContext = hidefCanvas.getContext('2d');

      if (window.devicePixelRatio) {
        var hidefCanvasWidth = $(hidefCanvas).attr('width');
        var hidefCanvasHeight = $(hidefCanvas).attr('height');
        var hidefCanvasCssWidth = hidefCanvasWidth;
        var hidefCanvasCssHeight = hidefCanvasHeight;

        $(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
        $(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
        $(hidefCanvas).css('width', hidefCanvasCssWidth);
        $(hidefCanvas).css('height', hidefCanvasCssHeight);
        hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);
      }

      hidefContext.font = "16px Palatino";
      hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);
    });
    </script>
</html>
	<html>
	<head>
	<script src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
	</head>

	<body>
	<h2>Naive canvas</h2>
	<canvas id="naive" width="400" height="50"></canvas>

	<h2>High-def Canvas</h2>
	<canvas id="hidef" width="400" height="50"></canvas>
	</body>

	<script>
	$(document).ready(function() {

	// Output to Canvas without consideration of device pixel ratio
	var naiveContext = $('#naive')[0].getContext('2d');
	naiveContext.font = '16px Palatino';
	naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

	// Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
	var hidefCanvas = $('#hidef')[0];
	var hidefContext = hidefCanvas.getContext('2d');

	if (window.devicePixelRatio) {
	var hidefCanvasWidth = $(hidefCanvas).attr('width');
	var hidefCanvasHeight = $(hidefCanvas).attr('height');
	var hidefCanvasCssWidth = hidefCanvasWidth;
	var hidefCanvasCssHeight = hidefCanvasHeight;

	$(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
	$(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
	$(hidefCanvas).css('width', hidefCanvasCssWidth);
	$(hidefCanvas).css('height', hidefCanvasCssHeight);
	hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);
	}

	hidefContext.font = "16px Palatino";
	hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);
	});
	</script>
	</html>