javascript - JQuery event .load() not firing randomly on dynamicaly created image -

ok, think it's best if throw code in there , explain i'm trying do. basicaly followed ('kinda) code sample here , adapted work data.

getbase64image: function () {     var self = this,         svgdata = new xmlserializer().serializetostring(this.svg),         canvas = document.createelement("canvas"),         ctx = null,         img = document.createelement("img");     $("body").append($(img).attr("id", "tmpimg").css("visibility", "hidden"));     canvas.setattribute("width", (self.width * 5).tostring() + "px");     canvas.setattribute("height", (self.height * 5).tostring() + "px");     ctx = canvas.getcontext("2d");      ctx.fillstyle = "#ffffff";     ctx.fillrect(0, 0, (self.width * 5), (self.height * 5));     $(img).on("load", function () {         ctx.drawimage(img, 0, 0, (self.width * 5), (self.height * 5));         var event = jquery.event("pngexportcomplete");         event.image64 = canvas.todataurl("image/png").split(",")[1];         event.time = new date();         $(self).trigger(event);         //i added based on this**     }).each(function () {         if (this.complete) $(this).load();     });     img.setattribute("src", "data:image/svg+xml;base64," + btoa(svgdata)); } 

** this

then have event listener attached element waiting pngexportcomplete event, , send on __dopostback(); (yes, i'm working asp webforms).

problem

the main problem have load event not consistently fired. does, fails enter code portion, , can't seem find steps reproduce it. in other words, appears random.

but, ever since einstein, know coincidences seldom, if not unexistent. i'm asking if can think of might wrong existing code.

ps: once starts failing keeps on failing. doesn't start failing @ same time, or @ least i'm blind see it.

nailed it. trying load svg image's url data canvas (not image, svg). problem caused masks. used masks on svg paths create 'holes' in objects. decided against (since holes still capturing mouse events , couldn't rid of them) , went multiple 'm's on single path's d attribute this:

<path d="m0,0 ... zm90,30 ... zm23,23"> 

and got rid of bug! had tracked being issue of canvas not loading/liking 1 of svg elements, because anytime deleted of elements started working again. turns out ugly masks, beware anyone, canvas doesn't svg masks, behaviour inconsistent (sometimes did work). seems negative values in masks viewbox attribute, haven't got more time test it.

but anyway, keep in mind. 1 day fixed!