Render image as defined pixel squares HTML5 canvas?

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?