yurydelendik · May 28, 2012 19:36
diff --git a/scale.html b/scale.html
 <!doctype html>
 <canvas id="sample" width="400" height="400"></canvas>
 <script>
  var sample = document.getElementById("sample");
  function createSample() {
    var ctx = sample.getContext('2d');
    var width = sample.width, height = sample.height;
    var pixels = ctx.getImageData(0, 0, width, height);
    var data = pixels.data;
    var size0 = 5, size1 = 8;
    var offset = 24;
    for (var i = 0; i < 9; i++) {
      for (var j = 0; j < size1; j++) {
        data[3 + 4 * (offset + j + width * (offset))] = 255;
        data[3 + 4 * (offset + j + width * (offset + size1 - 1))] = 255;
        data[3 + 4 * (offset + size1 - 1 + width * (offset + j))] = 255;
        data[3 + 4 * (offset + width * (offset + j))] = 255;
      }
      offset -= 2;
      var size2 = size0 + size1; size0 = size1; size1 = size2;
    }
    ctx.putImageData(pixels, 0, 0);
  }
  createSample();

  function pushScaled(scale) {
    var canvas = document.createElement('canvas');
    var width = canvas.width = Math.ceil(sample.width / scale);
    var heigth = canvas.height = Math.ceil(sample.height / scale);
    var ctx = canvas.getContext('2d');
    ctx.scale(1 / scale, 1 / scale);
    ctx.drawImage(sample, 0, 0);
    document.body.appendChild(document.createElement('hr'));
    document.body.appendChild(document.createTextNode('Scale: ' + scale));
    document.body.appendChild(canvas);
  }
  pushScaled(1.5);
  pushScaled(2);
  pushScaled(3);
  pushScaled(4);
  pushScaled(7);
  pushScaled(10);
 </script>
	<!doctype html>
	<canvas id="sample" width="400" height="400"></canvas>
	<script>
	var sample = document.getElementById("sample");
	function createSample() {
	var ctx = sample.getContext('2d');
	var width = sample.width, height = sample.height;
	var pixels = ctx.getImageData(0, 0, width, height);
	var data = pixels.data;
	var size0 = 5, size1 = 8;
	var offset = 24;
	for (var i = 0; i < 9; i++) {
	for (var j = 0; j < size1; j++) {
	data[3 + 4 * (offset + j + width * (offset))] = 255;
	data[3 + 4 * (offset + j + width * (offset + size1 - 1))] = 255;
	data[3 + 4 * (offset + size1 - 1 + width * (offset + j))] = 255;
	data[3 + 4 * (offset + width * (offset + j))] = 255;
	}
	offset -= 2;
	var size2 = size0 + size1; size0 = size1; size1 = size2;
	}
	ctx.putImageData(pixels, 0, 0);
	}
	createSample();

	function pushScaled(scale) {
	var canvas = document.createElement('canvas');
	var width = canvas.width = Math.ceil(sample.width / scale);
	var heigth = canvas.height = Math.ceil(sample.height / scale);
	var ctx = canvas.getContext('2d');
	ctx.scale(1 / scale, 1 / scale);
	ctx.drawImage(sample, 0, 0);
	document.body.appendChild(document.createElement('hr'));
	document.body.appendChild(document.createTextNode('Scale: ' + scale));
	document.body.appendChild(canvas);
	}
	pushScaled(1.5);
	pushScaled(2);
	pushScaled(3);
	pushScaled(4);
	pushScaled(7);
	pushScaled(10);
	</script>