How to force imageSmoothingEnabled to be false

Question

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?

Answer 1

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.

Answer 2

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;