Stretch canvas without interpolating image

Question

Stretch canvas without interpolating image

Navigation

#1 by (1 votes)

0

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

javascript html css

asked by anonymous 11.03.2016 / 22:05

1 answer

Error Signing Conflicting Place form in the center

score 1 · Accepted Answer

CSS3 has a property called image-rendering, which you arrow as pixelated. At least Chrome supports: link

It just will not look very good except when the effective width is an integer multiple of 400.

Copying of an older, older OS response:

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                            */
}