Skip to content

Instantly share code, notes, and snippets.

@yurydelendik
Created May 28, 2012 19:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yurydelendik/2820830 to your computer and use it in GitHub Desktop.
Save yurydelendik/2820830 to your computer and use it in GitHub Desktop.
Scaling
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment