XuankangLin/high_resolution.html

## high_resolution.html
<!DOCTYPE html>
<html>
<head>
    <title> Testing modifying context of canvas. -- Andriy </title>
</head>

<body>
	<p>Hello Andriy</p>

	<h2>Raw</h2>
	<canvas id="naive"></canvas>

	<h2>Utilized</h2>
	<canvas id="hidef"></canvas>

<script type="text/javascript">
	function adaptCanvasContext(ctx, factor) {
		if (ctx.adapted_for_high_resolution) {
			return;
		}

    	var savedFunctions = {};

     	function modify(func_name, args_func) {
        	savedFunctions[func_name] = ctx[func_name];
        	ctx[func_name] = function() {
        		return savedFunctions[func_name].apply(ctx, args_func(arguments));
        	}
      	}

        /*
       	 * return a new array with each element being the previous one in args * factor
       	 */
      	function multiply_each(args) {
        	// convert to an array
        	args = Array.prototype.slice.call(args);
        	return args.map(function(e) { return e * factor; });
      	}


    	modify('isPointInPath', multiply_each);

      	// TODO
      	modify('setTransform', function(args) {
        	return args;
      	});

      	// TODO
      	modify('getImageData', multiply_each);

      	// TODO
      	modify('putImageData', function(args) {
        	return args;
      	});

      	// TODO 放在这里只是要说明这个方法得改，但是不在这里改，因为它是canvas的方法...
      	modify('toDataURL', function(args) {
        	return args;
      	});

      	ctx.adapted_for_high_resolution = true;
    }

    var CANVAS_WIDTH = 400;
    var CANVAS_HEIGHT = 300;

    // Output to Canvas without consideration of device pixel ratio
    var naiveCanvas = document.getElementById("naive");
    var naiveContext = naiveCanvas.getContext("2d");

    // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
    var hidefCanvas = document.getElementById("hidef");
    var hidefContext = hidefCanvas.getContext('2d');

    function draw(ctx) {
        ctx.font = '16px Palatino';
      	ctx.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

      	ctx.beginPath();
      	ctx.moveTo(10, 10);
      	ctx.lineTo(200, 100);
      	ctx.stroke();

      	ctx.beginPath();
      	ctx.moveTo(20,20);
      	ctx.bezierCurveTo(20,100,200,100,200,20);
      	ctx.stroke();

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
    }

    var DEVICE_PIXEL_RATIO = ('devicePixelRatio' in window) ? function() {
      	return window.devicePixelRatio;
    } : function() {
      	return 1;
    };

    // for normal text, does it need to allocate extra size for canvas
    var backingScale = (function(ctx) {
      // ask for 1 pixel, how many pixels are really given, iOS is 1, OS X is 2
      var bsRatio = ('webkitBackingStorePixelRatio' in ctx) ? ctx.webkitBackingStorePixelRatio : 1;

      return DEVICE_PIXEL_RATIO() / bsRatio;
    })(hidefContext);

    naiveCanvas.width = CANVAS_WIDTH;
    naiveCanvas.height = CANVAS_HEIGHT;

    // canvas.width 是 in pixels
    hidefCanvas.width = CANVAS_WIDTH * backingScale;
    hidefCanvas.height = CANVAS_HEIGHT * backingScale;

    hidefCanvas.style.width = CANVAS_WIDTH + "px";
    hidefCanvas.style.height = CANVAS_HEIGHT + "px";

    hidefContext.scale(backingScale, backingScale);

    adaptCanvasContext(hidefContext, DEVICE_PIXEL_RATIO());

    draw(naiveContext);
    draw(hidefContext);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title> Testing modifying context of canvas. -- Andriy </title>
	</head>

	<body>
	<p>Hello Andriy</p>

	<h2>Raw</h2>
	<canvas id="naive"></canvas>

	<h2>Utilized</h2>
	<canvas id="hidef"></canvas>

	<script type="text/javascript">
	function adaptCanvasContext(ctx, factor) {
	if (ctx.adapted_for_high_resolution) {
	return;
	}

	var savedFunctions = {};

	function modify(func_name, args_func) {
	savedFunctions[func_name] = ctx[func_name];
	ctx[func_name] = function() {
	return savedFunctions[func_name].apply(ctx, args_func(arguments));
	}
	}

	/*
	* return a new array with each element being the previous one in args * factor
	*/
	function multiply_each(args) {
	// convert to an array
	args = Array.prototype.slice.call(args);
	return args.map(function(e) { return e * factor; });
	}


	modify('isPointInPath', multiply_each);

	// TODO
	modify('setTransform', function(args) {
	return args;
	});

	// TODO
	modify('getImageData', multiply_each);

	// TODO
	modify('putImageData', function(args) {
	return args;
	});

	// TODO 放在这里只是要说明这个方法得改，但是不在这里改，因为它是canvas的方法...
	modify('toDataURL', function(args) {
	return args;
	});

	ctx.adapted_for_high_resolution = true;
	}

	var CANVAS_WIDTH = 400;
	var CANVAS_HEIGHT = 300;

	// Output to Canvas without consideration of device pixel ratio
	var naiveCanvas = document.getElementById("naive");
	var naiveContext = naiveCanvas.getContext("2d");

	// Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
	var hidefCanvas = document.getElementById("hidef");
	var hidefContext = hidefCanvas.getContext('2d');

	function draw(ctx) {
	ctx.font = '16px Palatino';
	ctx.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

	ctx.beginPath();
	ctx.moveTo(10, 10);
	ctx.lineTo(200, 100);
	ctx.stroke();

	ctx.beginPath();
	ctx.moveTo(20,20);
	ctx.bezierCurveTo(20,100,200,100,200,20);
	ctx.stroke();

	ctx.fillStyle="red";
	ctx.fillRect(20,20,75,50);
	ctx.globalCompositeOperation="source-over";
	ctx.fillStyle="blue";
	ctx.fillRect(50,50,75,50);

	ctx.fillStyle="red";
	ctx.fillRect(150,20,75,50);
	ctx.globalCompositeOperation="destination-over";
	ctx.fillStyle="blue";
	ctx.fillRect(180,50,75,50);
	}

	var DEVICE_PIXEL_RATIO = ('devicePixelRatio' in window) ? function() {
	return window.devicePixelRatio;
	} : function() {
	return 1;
	};

	// for normal text, does it need to allocate extra size for canvas
	var backingScale = (function(ctx) {
	// ask for 1 pixel, how many pixels are really given, iOS is 1, OS X is 2
	var bsRatio = ('webkitBackingStorePixelRatio' in ctx) ? ctx.webkitBackingStorePixelRatio : 1;

	return DEVICE_PIXEL_RATIO() / bsRatio;
	})(hidefContext);

	naiveCanvas.width = CANVAS_WIDTH;
	naiveCanvas.height = CANVAS_HEIGHT;

	// canvas.width 是 in pixels
	hidefCanvas.width = CANVAS_WIDTH * backingScale;
	hidefCanvas.height = CANVAS_HEIGHT * backingScale;

	hidefCanvas.style.width = CANVAS_WIDTH + "px";
	hidefCanvas.style.height = CANVAS_HEIGHT + "px";

	hidefContext.scale(backingScale, backingScale);

	adaptCanvasContext(hidefContext, DEVICE_PIXEL_RATIO());

	draw(naiveContext);
	draw(hidefContext);
	</script>
	</body>
	</html>