Image not being drawn on canvas as expected from dyantree onActivate event handler

Question

I have an image that I want to display when a non-folder node is activated.

1. Expand the folder node.
2. Click on a non-folder node and that node's image will not be displayed as expected.
3. Click on a node that is different from the node in the previous step then click on the node from the last step and that node's image will be displayed as expected.

For some reason a node's image will not be displayed until the onActivate event is fired for that node at least at least twice (i.e. by visiting another node, then coming back to the node in question).

I tried several ways of getting around this. The only way that that worked for me was to use the onRender event handler instead of onActivate, but that considerably reduces the speed of the tree in production (potentially 5000+ nodes displayed at any given time).

I also believe I have followed all the recommendations @pimvdb provided in his answer to a similar question here and here, but to no avail. I have tried setting the image src before and after declaring the onload function, but it doesn't seem to matter either way.

Any pointers would be appreciated.

jsFiddle

Dyantree

P.S. After you see this problem once you may have to clear your cache to see it again.

Answer 1

Apparently the image(s) were loading fine, the problem was how/when I was resizing the canvas for the image. Here is a jsFiddle with the fix. I changed this...

function loadImage(node) {
    var imageObj = new Image();
    imageObj.onload = function() {
        ctx.drawImage(imageObj, 0, 0);
    };
    imageObj.src = node.data.imageUrl;

    canvasObj.attr("height", imageObj.height + "px");
    canvasObj.attr("width", imageObj.width + "px");
}

to this...

function loadImage(node) {
    var imageObj = new Image();
    imageObj.onload = function() {
        canvasObj.attr("height", imageObj.height + "px");
        canvasObj.attr("width", imageObj.width + "px");
        ctx.drawImage(imageObj, 0, 0);
    };
    imageObj.src = node.data.imageUrl;
}