JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>
JavaScript
// open console (F12)
var canvas = document.getElementById('canvas');
var stage = new createjs.StageGL(canvas);
createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener('tick', function(e) {
// do nothing
});
var imageSource = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
var images = [imageSource, imageSource];
var manifest = [];
for(var i = 0, n = images.length; i < n; ++i) {
manifest.push({
'id': i,
'src': images[i],
'type': 'image'
});
}
var loader = new createjs.LoadQueue(false);
loader.on('fileload', function(e)
{
var item = e.item;
images[item.id] = e.result;
});
loader.on('complete', function(e)
{
console.log('images loaded', images);
// create texture
for(var i = 0, n = images.length; i < n; ++i) {
// btw this will trigger twice ~ the texture will tie with the last image
images[i]._texture = stage._loadTextureImage(stage._webGLContext, images[i]);
// now both images have the _storeID set.
console.log('image['+i+']._storeID', images[i]._storeID);
}
// now we kill the texture of the first image (but this will kill the _storeID of the last image as it's tied to the texture)
stage._killTextureObject(images[0]._texture);
// ...and. That's where the 'weird' rendering appears
console.log('stage._textureIDs', stage._textureIDs);
// watch
for(i = 0; i < n; ++i) {
console.log('image['+i+']._storeID', images[i]._storeID, (images[i]._storeID != null) ? '<<< bugged image, will not render anymore' : '');
}
});
loader.loadManifest( manifest );
/*
Possible solutions:
1. don't use multiple images with same source, ie all images should be stored in a single hash
2. Fix method 'StageGL.prototype._appendToBatchGroup()' on line
https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/StageGL.js#L2249
replace: if (image._storeID === undefined)
with: if (image._storeID === undefined ||...