Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

context.imageSmoothingEnabled isn't implemented #211

buschtoens opened this Issue Sep 2, 2012 · 4 comments


None yet
2 participants
var resolution = 100;

var img = new Image();
img.src = someBuffer;

var canvas = new Canvas(resolution, resolution),
    ctx = canvas.getContext("2d");

ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 8, 8, 8, 8, 0, 0, resolution, resolution);

This code crops and scales up the image img to 100px x 100px. The resulting image should not be antialiased, since ctx.imageSmoothingEnabled = false. But sadly it's aliased. context.imageSmoothingEnabled is part of the spec. Chrome and Firefox already adapted with a vendorized version.

Please implement this property, since I don't know how. Porbably this line has to be slightly altered and the accessor needs to be added somewhere here.


c-spencer commented Sep 6, 2012

This needs the context->state->patternQuality to be set to a pattern of CAIRO_FILTER_NEAREST. Currently this is exposed through the non-standard API of patternQuality, but only exposes CAIRO_FILTER_FAST/GOOD/BEST.

Keeping the non-standard API and this may be kind of awkward. Could track both patternQuality and imageSmoothingEnabled, and if smoothing is disabled, set the pattern quality to nearest, otherwise use the patternQuality as set?


c-spencer commented Sep 6, 2012

Reading a little more (I don't have things setup currently for myself to check) but does setting patternQuality to 'fast' do the right kind of thing? (probably won't be perfect)

Thank you very much. I'll give it a try in a few minutes. Didn't know about that property.

NEAREST should definitively be implemented. IMHO your idea of a non-standard opt-in is the best solution.

Dude, awesome! Works like a charm. ctx.patternQuality = "fast"; did the trick.

Anyway, we should move on to your non-standard opt-in solution, so that ctx.imageSmoothingEnabled = false; simply sets ctx.patternQuality = "fast" / "nearest";, while ctx.patternQuality is still directly accessible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment