Render image as defined pixel squares HTML5 canvas?

Question

I have the following 6x5 image:

Which appears as so blown up on the canvas:

I render it using more or less this code this.context.putImageData(this.imageData, 0, 0) and scale the canvas with css (canvas {width: 100%}).

It has the following rgb values:

51.65   41.59   60.74   159.44  137.91  165.41  
147.29  71.01   52.93   73.80   115.80  93.45   
77.16   112.66  98.07   70.43   78.91   107.27  
107.39  122.85  60.67   103.91  144.37  124.05  
138.59  123.77  140.51  107.25  52.10   138.80  

Why can't I see the individuals as block squares in a defined grid? Is it something to do with how images are rendered?

Answer 1

Yes. This is related to how the images are rendered.

When you have an image with colors, you usually have the complete information of the color of every pixel. So a 100x100 image renders perfectly on a 100x100 pizel size.

But when you try to scale UP this image, you have more pixels available to fill but less information about how to fill them. So you resort to mathematical algorithms, usually known as interpolation.

Canvas will automatically interpolate the pixels to fill in gaps using nearest pixel information.

To get your desired effect of having single pixels, you need to scale up without any interpolation. To do this you can refer to this answer, or rather find several answers now that you know the appropriate terms to exactly describe your problem.

This CSS3 solution should work in Chrome 41+ for now:

canvas {
    image-rendering: pixelated;
}