Canvas - Element disappears after ThresholdFilter

Question

I have a problem with the Threshold Filter. My code so far:

var stage = new c.Stage("Canvas");
var canvas = document.getElementById('Canvas');
var currHeight = $('.canvasColumn').height();


canvas.width = 3335;
canvas.height = 3335;
$('#Canvas').css("height", currHeight + "px");
$('#Canvas').css("width", currHeight + "px");


$('#button').on("click", () => {
  var imgfb = new Image();
  imgfb.src = "/public/img/testFB.png";

  var bmp = new c.Bitmap(imgfb);
  bmp.set({x : 0, y: 0, name : "testFB"});
  stage.addChild(bmp);
  stage.update();

  //layer is a function which sets onClickListeners for pressmove etc.
  layer(bmp);
});

$('#filt').on("click" ,() => {
  var bmp = stage.getChildByName("testFB");
  bmp.cache(bmp.x, bmp.y, bmp.image.width, bmp.image.height);
  bmp.filters = [new createjs.ThresholdFilter(0, 0, 0, 0xdf1318, true)];
  bmp.updateCache();
  stage.update();
});

Because of high resolution pngs, I have to scale down the height and width styling of my canvas. If I execute the filter as long as the bitmap is at position x = y = 0 it works. But as soon as I move the bitmap it just disappears after the filtering from the screen (canvas). Could you point me to my mistake?

The picture used in this example can be found here:

http://www.freepngimg.com/download/facebook/1-2-facebook-download-png.png

---

PS: If I set:

bmp.cache(0, 0, 10000, 7000);

it also works but is terribly slow.

Answer 1

I found a solution:

The input params x and y of cache are bmp based, which means local. Therefore set both to 0.