We Keep Coding

Setting img src only works on second attempt

I suspect this question may not meet the SO criteria as it's not reproducible. If I could reproduce it I'd probably know what was causing the issue.
I am trying to add an image to the DOM via js. I set the images src in the code and then mount it. The problem that I have is that, when only setting the src and mounting it, the image doesn't load. The element is there, but it has no size, and there was no network request for the image. the onload and onerror never fire either. The img is there and the src is correct, but no image is rendered, the size is 0x0.
It's created and mounted like this:
const image = new Image();
image.src = "my-url-here";
document.querySelector("a").after(image);
I can get this working in two ways. Set the src to blank first and then what I intend it to be:
const image = new Image();
image.src = "";
image.src = "my-url-here";
document.querySelector("a").after(image);
or by preloading the image elsewhere:
// immediately:
const image = new Image();
image.src = "my-url-here";
// ...
// some other place:
const image = new Image();
image.src = "my-url-here";
document.querySelector("a").after(image);
Either works fine and are somewhat viable, though not really preferrable solutions. My question, though, is this; why is this happening? I can't reproduce it anywhere else and so it's maybe specific only to the page I'm looking at (in which case perhaps there's not much help available).
If that's not answerable, then perhaps the question is, where can I look to try and get some information on this because it's incredible difficult to know where to start with this one.

EaselJs and TweenJs: Change image of Bitmap in tweening

I'm trying to create an animation with a flask image. I want to pour the flask, then replace the flask with an empty one, and then return the flask to its original location. The code I have right now looks like this:
var renderPour = function (flask, index){
// Using a Motion Guide
curX = flask.x;
curY = flask.y;
createjs.Tween.get(flask)
.wait(2000*index)
.to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
.to({image:'/assets/empty_flask'+(index+1)+'.svg'}, 0)
.to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);
}
According to the documentation, it says
Non-numeric properties will be set at the end of the specified duration.
So I expect the image src property to be changed. But when I run my code, the Bitmap just disappears and I have a 'invisible' Bitmap there. I know it's still there because I have an array that keeps track of all Bitmaps and it's still there, and I just can't see it. When I check the image's src value in the console, it's changed and correct.
I did some research and guessed that it's probably because the stage is not updated. Here is my update stage code:
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
createjs.MotionGuidePlugin.install();
function tick(event) {
stage.update(event);
console.log('x: ', flaskArr[1].x, 'y', flaskArr[1].y);
}
And I tried to run stage.update() in the console as well, but the Bitmap is still invisible.
Additionally it seems that the later half of the animation is still working, except that the Bitmap is not showing according to the log.
I'm wondering is there a correct way to replace the image in TweenJs? Or is there another way to replace the image in the middle of the animation? Very much appreciated!

I figured out the solution on my own, so i'll just post it. I have to pass a new image instead of just a src string:
var emptImage = new Image();
emptImage.src = emptyFlaskPath(id);
createjs.Tween.get(flask)
.wait(2000*(flask.id-1))
.to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
.to({image: emptImage}, 0)
.to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);

Does THREE have a utility for loading canvases in an async manner?

I have a canvas with some pictures and I would like to load it onto a texture much like an image with ImageUtils. As you know canvas has no 'onfinished' rendering callback so I am at the mercy of THREE here. I have come across this but this seems to be tightly coupled with AJAX.

You can read the image from the canvas as a data url:
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
After you execute drawImage on the canvas, the image data is already going to be inside there.
These data urls then can be used as textures in Three.js.
var texture = THREE.ImageUtils.loadTexture(dataURL);
Update
You could also try this for debugging:
var texture = THREE.ImageUtils.loadTexture(dataURL, undefined, function(texture){
// Handler for onLoad, this returns the img
console.log(texture);
},
function(event){
// Handler for onError, it returns the error event
console.log(event);
});

Index or size was negative, or greater than the allowed value.

I'm using color-thief.js on my website to render a colorpalette based on my portfolio image.
Sometimes it's working but I'm getting the error below most of the time. I'm no JS superhero so it would be really nice if somebody could help me out here.
Uncaught IndexSizeError: Index or size was negative, or greater than
the allowed value.
Link to my portfolio page
You can see the error pop up in the console and it seems to do be fine when I load it for the first time in a small while.

That behavior (sometimes it works, sometimes not) is caused by trying to invoke color thief without image being loaded, try to use onload event:
var el = document.getElementById(my_image_id);
var img = new Image();
img.onload = function() {
var dominantColor = colorThief.getColor(el);
/* ... */
};
img.src = el.getAttribute('src');

Canvas drawImage using data URL

I'll start with the script:
function saveInstance() {
_savedInstance = document.getElementById('canvasID').toDataURL();
}
function restoreInstance() {
ctx.drawImage(_savedInstance,0,0);
}
The purpose is to save an instance of the canvas and re-apply it later [Similar to how ctx.save() saves the style and transformations].
However, I got the error that says incompatible types (Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17). Is there any canvas method that will allow me to use the data URL string to re-draw the instance?
**If there's a better way to implement this save/restore idea I have, that'd also be much appreciated.
-Firstmate

Yes, you can create an image element with its source as _savedInstance and then draw it to the canvas.
var img = new Image();
img.src = _savedInstance;
ctx.drawImage(img,0,0);