image-rendering: pixelated doesn't work at my javascript canvas

Question

I'm trying to add my pixelart to the canvas, but there I met the problem. That image is blurry so I added in canvas css style image-rendering: pixelated. But it's same as before. When I add same style to image outside canvas it's well pixelated. Can someone give me a tip? Why it doesn't work in canvas? Thank you for all replies!

Javascript:

    ctx.drawImage(this.img, this.x - this.size/2, this.y - this.size/2, this.size, this.size)

CSS:

#canvas {
    position: relative;
    image-rendering: pixelated;
    width: 256px;
    height: 256px;
}

Answer 1

That's probably because of imageSmoothingEnabled which is part of the Canvas context. ( More )

In default it's set to true which cause this problem.

Set the imageSmoothingEnabled = false ;

I highly recommend to set this property to false every time when you change your canvas's size ( Source )