I am using several layered canvas plus fabric.js canvas like so:

<canvas id="grid" width="1401" height="785"></canvas>
<div class="canvas-container" style="width: 1401px; height: 785px; position: relative; -webkit-user-select: none;">
  <canvas id="fabric_canvas" class="lower-canvas" width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
  <canvas class="upper-canvas " width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;"></canvas>
</div>
<canvas id="keys" width="79" height="512"></canvas>
<canvas id="ruler" width="1024" height="50"></canvas>
<canvas class="helper" width="1401" height="785"></canvas>

All these canvas context have the property imageSmoothingEnabled set to false but for unknown reason, smoothing is always enabled for all the canvas and querying ctx.imageSmoothingEnabled return true even though it was set to false just before.

It seem to be somewhat fabric.js related because imageSmoothingEnabled is false when i do not initialize fabric.js canvas but as soon as i initialize it, all of them are set to true.

Smoothing is always enabled under Google Chrome but under Firefox, the smoothing vary (on/off) when i move the fabric.js canvas viewport (panning) or moving the objects.

I use this code to turn off image smoothing for standard canvas (and also for the fabric.js one after initialization):

ctx.mozImageSmoothingEnabled    = false;
ctx.oImageSmoothingEnabled      = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled     = false;
ctx.imageSmoothingEnabled       = false;

I also use this to set image smoothing off for the fabric.js canvas:

c_fabric = new fabric.Canvas("fabric_canvas", {
    imageSmoothingEnabled: false
});

Why does it happen? How to disable image smoothing for good?

I am using several layered canvas plus fabric.js canvas like so:

<canvas id="grid" width="1401" height="785"></canvas>
<div class="canvas-container" style="width: 1401px; height: 785px; position: relative; -webkit-user-select: none;">
  <canvas id="fabric_canvas" class="lower-canvas" width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
  <canvas class="upper-canvas " width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;"></canvas>
</div>
<canvas id="keys" width="79" height="512"></canvas>
<canvas id="ruler" width="1024" height="50"></canvas>
<canvas class="helper" width="1401" height="785"></canvas>

All these canvas context have the property imageSmoothingEnabled set to false but for unknown reason, smoothing is always enabled for all the canvas and querying ctx.imageSmoothingEnabled return true even though it was set to false just before.

It seem to be somewhat fabric.js related because imageSmoothingEnabled is false when i do not initialize fabric.js canvas but as soon as i initialize it, all of them are set to true.

Smoothing is always enabled under Google Chrome but under Firefox, the smoothing vary (on/off) when i move the fabric.js canvas viewport (panning) or moving the objects.

I use this code to turn off image smoothing for standard canvas (and also for the fabric.js one after initialization):

ctx.mozImageSmoothingEnabled    = false;
ctx.oImageSmoothingEnabled      = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled     = false;
ctx.imageSmoothingEnabled       = false;

I also use this to set image smoothing off for the fabric.js canvas:

c_fabric = new fabric.Canvas("fabric_canvas", {
    imageSmoothingEnabled: false
});

Why does it happen? How to disable image smoothing for good?

• javascript
• html
• canvas
• html5-canvas
• fabricjs

• 2 I would report this as an issue: github.com/kangax/fabric.js/issues – user1693593 Commented Apr 10, 2015 at 10:45
• All canvas have the imageSmoothingEnabled property set to true even after disabling it so this does not seem related to fabric.js at all, what is strange is if i print each canvas context with console.log(ctx); i can see properties such as mozImageSmoothingEnabled set to false but imageSmoothingEnabled and webkitImageSmoothingEnabled (under Chrome) are set to true. I have updated the question. – Onirom Commented Apr 10, 2015 at 14:09
• Just have tried new fabric.Canvas("fabric_canvas", { imageSmoothingEnabled: false }) with version 3.6.2 of fabric.js and it seems to be sufficient. – robsch Commented Mar 2, 2020 at 9:40

2 Answers 2

After some hours of testing and debugging, the problem was solved, apparently the imageSmoothingEnabled property need to be set again after each canvas resizing so this was not related to fabric.js at all, altough when changing fabric.js canvas dimensions via setDimensions, the library should set again imageSmoothingEnabled, i will propose a patch.

Yep, a look at the FabricJS source says you're right...

It looks like FabricJS forces imageSmoothingEnabled to be true during the initial creation of the canvas class--even if you set imageSmoothingEnabled to false in the options. The FabricJS API method to reset imageSmoothingEnabled is private, so you can't use the API to set it to false.

So you will need to wait until FabricJS creates the canvas element and then manually reset its context.imageSmoothingEnabled to false using the multiple cross-browser attribute variations:

ctx.imageSmoothingEnabled       = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled    = false;
ctx.msImageSmoothingEnabled     = false;
ctx.oImageSmoothingEnabled      = false;