KineticJS caching bug

by pronebird

HTML

<script src="http://cdn.jsdelivr.net/kineticjs/5.1.0/kinetic.min.js"></script>
<div id="container"></div>
<img style="display:none" ...

CSS

body { background:#333 }

JavaScript

//
// WTF WTF WTF
//

var GRID_SIZE = 4;

// Create SO logo image
var image = new Image();

// filters require local domain BS, feed it with base64
image.src = $('#horrible-crap').attr('src');

// create stage when image loaded
image.onload = function () {
    // create stage
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 600,
        fill: '#333'
    });
    
    // create image
    var backgroundImage = new Kinetic.Image({
        width: stage.getSize().width,
        height: stage.getSize().height,
        image: image
    });
    
    // create background layer
    var backgroundLayer = new Kinetic.Layer({
        x: 150, y: 150,
        width: 300,
        height: 300
    });
    
    // add background layer into stage
    stage.add(backgroundLayer);
    
    // add background image
    backgroundLayer.add(backgroundImage);
    
    // cache and apply filters
    // @NOTE: COMMENT TWO LINES BELOW TO SEE WHAT'S GOING ON
    backgroundImage.cache();
    backgroundImage.filters([ Kinetic.Filters.Grayscale ]);
    
    // calculate cellSize
    var cellSize = {
        width: backgroundLayer.getWidth() / GRID_SIZE,
        height: backgroundLayer.getHeight() / GRID_SIZE
    };
    
    // draw grid
    for(var i = 0; i < GRID_SIZE; i++) {
        for(var j = 0; j < GRID_SIZE; j++) {
            var rect = new Kinetic.Rect({
                x: cellSize.width * j,
                y: cellSize.height * i,
                width: cellSize.width,
                height: cellSize.height,
                stroke: '#fac',
                strokeWidth: 2
            });
            backgroundLayer.add(rect);
        }
    }
    
    // cache background image layer
    backgroundLayer.cache();
    
    // draw stage
    stage.draw();
};