CODEWITHSUNDEEP
javascriptnode.jscanvasantialiasingcairo
iMoses
iMoses

Reputation: 4348

Node-Canvas image anti-aliasing doesn't seem to work

I'm trying to produce animation file using node.js and the node-canvas package, extracting frame by frame. Part of the animation includes scaling and moving images. My problem is that no anti-aliasing seems to be happening although according to node-canvas and cario (the graphic library behind the canvas) anti-aliasing should be done by default. Also, according to node-canvas anti-aliasing can be controlled using this systex ctx.antialias = 'gray';, but it doesn't seem to do anything either. If there's any more details I can provide that may help please let me know. Is there any way, using node-canvas or even cairo directly, to add anti-aliasing to image transformations?

P.S. I'm using ctx.drawImage method to draw the images and I've already also tried using patternQuality = 'best'; with no success.

Upvotes: 3

Views: 2023

Answers (1)

Søren Sandmann
Søren Sandmann

Reputation: 539

When upscaling patterns, cairo uses bilinear interpolation by default, which should look reasonable. However, when downscaling, cairo currently (as of 1.12.14) does not properly antialias patterns. There is no way to get this, short of actually adding the feature to cairo itself, though see below for a potential workaround.

The 'antialias' setting in cairo controls the antialiasing of rasterized shapes and text, not patterns. The setting that controls antialiasing for patterns is called 'cairo_pattern_set_filter' and has the following values:

CAIRO_FILTER_FAST,             // usually the same as NEAREST
CAIRO_FILTER_GOOD,             // usually the same as BILINEAR
CAIRO_FILTER_BEST,             // usually the same as BILINEAR
CAIRO_FILTER_NEAREST,          // for upscaling, this is pixel-replication
CAIRO_FILTER_BILINEAR,         // for upscaling, this is linear interpolation
CAIRO_FILTER_GAUSSIAN          // not implemented, should not be used

But as mentioned, none of them work well for downscaling.

A workaround that some people have used is to scale the image down in steps of 2. That is, keep downscaling the image to half the size in both dimensions until it is roughly the desired size. This downscaled image can then be used with a modified transformation that downscales by less than 2.

Upvotes: 6

Related Questions