Stretch canvas without interpolar image

Question

I have a canvas of width = 400 but, with Style.width = 100%, the image interpolates and the right angles of the pixels blur. I want to keep the pixels well visible, if anyone can help me I am very grateful.

Answer 1

CSS3 has a property called image-Rendering, which you arrow as Pixelated. At least Chrome supports: https://www.chromestatus.com/feature/5118058116939776

It just won’t look too pretty, except when the effective width is an integer multiple of 400.

Copied from an older answer in the English OS:

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}