How to Stretch Images with no Antialiasing with JavaScript?

Sometimes, we want to stretch images with no antialiasing with JavaScript.

In this article, we’ll look at how to stretch images with no antialiasing with JavaScript.

Stretch Images with no Antialiasing with JavaScript

To stretch images with no antialiasing with JavaScript, we can load the image into the canvas.

Then we can copy the image pixel by pixel onto another canvas which is displayed on the screen.

For instance, we can write:

<canvas id='canvas'></canvas>

to add the canvas to display.

Then we write:

const img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=";
img.onload = () => {
  const scale = 8;
  const srcCanvas = document.createElement('canvas');
  srcCanvas.width = img.width;
  srcCanvas.height = img.height;

  const srcCtx = srcCanvas.getContext('2d');
  srcCtx.drawImage(img, 0, 0);
  const srcData = srcCtx.getImageData(0, 0, img.width, img.height).data;

  const dstCanvas = document.getElementById('canvas');
  dstCanvas.width = img.width * scale;
  dstCanvas.height = img.height * scale;
  const dstCtx = dstCanvas.getContext('2d');

  let offset = 0;
  for (let y = 0; y < img.height; ++y) {
    for (let x = 0; x < img.width; ++x) {
      const r = srcData[offset++];
      const g = srcData[offset++];
      const b = srcData[offset++];
      const a = srcData[offset++] / 100.0;
      dstCtx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
      dstCtx.fillRect(x * scale, y * scale, scale, scale);
    }
  }
};

to create an img element with the Image constructor.

Then we set the src property of the image to load the image with the given URL.

Next, we set the img.onload property to a function that creates the canvas.

We set the width and height of the canvas to the width and height of the image with:

srcCanvas.width = img.width;
srcCanvas.height = img.height;

Then we draw the image onto the canvas with:

const srcCtx = srcCanvas.getContext('2d');
srcCtx.drawImage(img, 0, 0);
const srcData = srcCtx.getImageData(0, 0, img.width, img.height).data;

Next, we get the destination canvas element which we created with:

const dstCanvas = document.getElementById('canvas');

And we set the width and height of the destination canvas with:

dstCanvas.width = img.width * scale;
dstCanvas.height = img.height * scale;

And finally, we copy each pixel from the source canvas to the destination canvas with:

let offset = 0;
for (let y = 0; y < img.height; ++y) {
  for (let x = 0; x < img.width; ++x) {
    const r = srcData[offset++];
    const g = srcData[offset++];
    const b = srcData[offset++];
    const a = srcData[offset++] / 100.0;
    dstCtx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
    dstCtx.fillRect(x * scale, y * scale, scale, scale);
  }
}

Now we can see the pixelated version of the original image when we run the code.

Conclusion

To stretch images with no antialiasing with JavaScript, we can load the image into the canvas.

Then we can copy the image pixel by pixel onto another canvas which is displayed on the screen.