How to prevent HTML canvas pixel stretching with size [duplicate]

This question already has an answer here:

• Image size enlarging when drawing it on the Canvas 1 answer

I am plotting pixels to the HTML canvas:

var styleOpts = {
                  border:'1px solid #d3d3d3',
                  width:'512px',
                  height: '512px'
                };

<canvas width=10
        height=10 
        style={styleOpts} />

I noticed that when the inline style width and height are greater than the canvas width and height (as specified in the canvas tag), the resulting image is stretched and blurred. It's as if I rescaled a jpeg image rather than a vector image. I would have expected the latter. Can anyone help me scale the pixels without blurring? Note that if the widths and heights match, it looks as expected, but it's just too small for my needs.

If I increase the scaling even more: