HTML Canvas imageSmoothingEnabled kills Draw Image in Chrome on Windows - google-chrome

Question

We are using a canvas to draw an image, and require that the image is smoothed.
so we use context.imageSmoothingEnabled in the 2d Canvas context.
We notice that if we use a jpg and smoothing is true, then the image fails to scale correctly on some machines (mainly windows 64bit).
In addition, if smoothingQuality is set to 'low' (rather than medium or high) then it works, but of course, who wants low.
If you modify the code to point to a PNG file, it seems to work ok.
Here is the JS Code
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.imageSmoothingQuality = "medium";
// set to true and the image fails to scale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0, 50, 50);
}
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
body {
background: #CEF;
}
<canvas id="c" width="800" height="600"></canvas>
Thanks in advance.

Answer 1

I have tried it on a Win10 64bit, Win10 32Bit (64bitCPU) and Win10 32bit on Chrome Beta, & Canary
Can not repeat problems you mention.
The image format (jpeg,png) will not effect the result of any of the smoothing or quality settings (apart from source image quality).
What can make a difference, especially at small scales is the ratio of the scaled down image to the original. Ratios like 1/2 1/4 1/8th will produce far better results than 1/3 2/9 3/19th. When comparing images of different sizes you should compare at same scale ratio rather than same size (if original have different sizes)
Below I used your code and the image you linked to to draw the image at the same size you had. Along the top from left to right is smoothing true from quality high on left to low on right.
The second row is same but smoothing turned off.
Below that is the same but zoomed via copy of canvas and no smoothing to show more details of the differences the setting make (if any).
If as your question outlines this was reproducible it would be a major issue for chrome and would be quickly fixed. I would say it is something very specific, maybe all the graphics cards are the same type and there is a driver issue, or images are cached and some old bad version is appearing.
If you want more help the best you could do is provide some screen shots of the problems, showing the problem and the desired result. That way we can at least narrow it down somewhat.
var ctx = c.getContext('2d');
var img = new Image;
img.src = "http://i.imgur.com/gwlPu.jpg";
img.onload = function () {
ctx.imageSmoothingQuality = "high";
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0,50,50);
ctx.imageSmoothingQuality = "medium";
ctx.drawImage(img, 60, 0,50,50);
ctx.imageSmoothingQuality = "low";
ctx.drawImage(img, 120, 0,50,50);
ctx.imageSmoothingQuality = "high";
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 60,50,50);
ctx.imageSmoothingQuality = "medium";
ctx.drawImage(img, 60, 60,50,50);
ctx.imageSmoothingQuality = "low";
ctx.drawImage(img, 120, 60,50,50);
ctx.imageSmoothingQuality = "low"; // turn off all filtering
ctx.imageSmoothingEnabled = false;
ctx.drawImage(c,0,0,170,110,0,120,680,440)
}
body {
background: #CEF;
}
<canvas id="c" width="800" height="600"></canvas>
Following content edited in by OP user2739963
Here is a screen shot of this not working on a machine (We have many of these).