CAIRO_EXTEND_REFLECT when extending image

[ddcovery]

In version 1.6.12, method drawImage extends the imge using CAIRO_EXTEND REFLECT:

if (needsExtraSurface) {
...
cairo_pattern_set_extend(cairo_get_source(ctxTemp), CAIRO_EXTEND_REFLECT);
cairo_paint_with_alpha(ctxTemp, 1);
surface = surfTemp;
}

Finally you perform the drawing using the default cairo_pattern_set_extend

cairo_pattern_set_extend(cairo_get_source(ctx), CAIRO_EXTEND_NONE);

This "NONE" is doing nothing, because extend ALLWAYS uses the surfTemp version that contains a CAIRO_EXTEND_REFLECT and final result is a REFLECT extend.

This changes de default drawImage behaviour that is CAIRO_EXTEND_NONE (similar to Firefox/Chrome/...).

Actually, I solve this problem cleaning the reflected areas with extra code... problem is when the canvas where I paint the image contains useful contents this extra content is overpainted with the reflect.

[zbjornson]

I'm a bit lost. Can you provide code to reproduce the issue so we can fix it and add it to the test suite?

[ddcovery]

Ok, sorry.

I have 2 images:

• images/small.jpg, 801x1200
  

• image/big.jpg 2400x1602
  

This code loads the two images and draws the small one over the big one forcing extend:

const Canvas = require("canvas");
const Image = Canvas.Image;
const fs = require("fs");
const Q = require("bluebird");

// Draw cat with lime helmet
loadImage(__dirname + '/images/small.jpg').then(smallImg => loadImage('images/big.jpg').then(bigImg => {

  console.log("smallImg:", smallImg.width, smallImg.height); // 801 1200
  console.log("bigImg:", bigImg.width, bigImg.height); // 2400 1602
  
  var canvas = new Canvas(bigImg.width, bigImg.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bigImg, 0, 0);
  //return saveCanvas(canvas, __dirname + "/1.png");
  ctx.drawImage(smallImg, -800, -200, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  return saveCanvas(canvas, __dirname + "/result.png");

}));


function loadImage(src) {
  return new Q((resolve, reject) => {
    fs.readFile(src, function (err, squid) {
      if (err) {
        reject(err);
      } else {
        img = new Image;
        img.src = squid;
        resolve(img);
      }
    });
  });

}

function saveCanvas(canvas, dst) {
  return new Q((resolve, reject) => {

    const
      out = fs.createWriteStream(dst)
      , stream = canvas.pngStream();

    stream.on('data', function (chunk) {
      out.write(chunk);
    });

    stream.on('end', function () {
      console.log('saved png');
      resolve();
    });
  });
}

This is the result with 1.6.9:

And this with 1.6.12:

[chearon]

Well that's not good. Neither of those look correct against the code though, shouldn't the small image be scaled? Since for ctx.drawImage(smallImg), dWidth and dHeight are bigger than the small image's width and height.

[ddcovery]

version 1.6.9 behaviour is similar to that of Firefox,Chrome,Edge browsers.

You can try it: http://plnkr.co/edit/qw7czf?p=info

[ddcovery]

As I understand, nothing has to be scaled because sw==dw and sh==dh.

Extend is applied because source limits (sx, sy, sw, sh) are out of smallImg bounds (0, 0, smallImg.width, smallImg.height) and you require a way to "paint" pixels that are out of the souce image.

The default way to extend the source image to source limits is CAIRO_EXTEND_NONE (do nothing) that is the way Firefox, Chrome, Edge paint too

1.6.9 version is working properly.

[zbjornson]

Thanks for the info.

@asturur this is probably from #1229/#1243 (in 1.x and 2.x)

[zbjornson]

@asturur do you have time to look at this regression by chance?

[asturur]

i have to because this is why maybe global composite operation still fail me sometimes.
Thanks for the lead.

[asturur]

My first question is we should have tests catching this?

[asturur]

ok i understand....
So the extend reflect is there because otherwise the test that stitch together big small pieces of the big jpeg have some kinds of lines on the border.

I think i can fix it removing the extend, and figuring out a way to make the lines of stitching disapper ( maybe some rounding of pixels or applying the clipPath on the temporary surface.

I have also to verify how this code should behave on the browser because i have no idea now.

I need some days because i m travelling tomorrow, but maybe i can look at it.

I won't let the bug to rot, promise.