Is there a simpler (and still performant) way to upscale a canvas render with nearest neighbor resampling?

Question

I\'m kinda stumped about this seemingly simple task of upscaling a canvas render in nearest neighbor format, which I asked here:

How can I properly write this shader

Answer 1

I can offer two approaches that can both efficiently scale an image up or down using nearest neighbor.

To do it manually, you should iterate through each pixel of your new scaled image and calculate what pixel from the original they should use using ratios of the old size compared to the new size.

(My code snippets use .toDataURL() so they may not work in chrome.)

	
		
		
	
	
	
		
		
		
		Upload Image
		
		
		
	

Alternatively a much faster way using shaders, is to add your image to a texture that is set to use nearest neighbor filtering and draw it onto a quad. The size of the quad can be controlled via gl.viewport before drawing.

	
		
		
	
	
	
		
		
		
		
		Upload Image
		
	

Edit: To give better clarification on what this could look like in an actual renderer, I've created another example that draws a scene to a low resolution frame buffer and then scales it up to the canvas (The key is to set the min & mag filter to nearest neighbor).