2

Now my entire project is too big for a copy and paste, but here is a basic breakdown of what I'm doing right now:

$(document).ready(function(){
var canvas = $('#Canvas');
var data = {source: "images\pattern.png", repeat: "repeat"} ;
var pattern = canvas.createPattern(data); //Returns 'Null' at random
});

Things I've looked at so far:

  • Loading time (Somewhat related, it seems to break more often when the page loads faster)
  • Loading order (Doesn't seem related)
  • Preloading the image by forcing it to an on-page image beforehand (Doesn't fix it )
  • Preloading it using Image() and passing the image path to Image().src (doesn't fix it either)
  • Passing the Image() as data.source instead of a string path (might have helped just a little)
  • Initting JCanvas beforehand (No function seems to exists for this)
  • Creating the pattern as early or as late as possible (Seems to change the frequency, but not by a lot)

It seems to have a mind of it's own and I can't figure out what I'm doing wrong. Anyone have a clue as to what I'm doing wrong?

-Edit1-

Debugging through the Jcanvas source right now and I think it has something to do with the context. Is there any way for me to preload the canvas context?

-Edit2-

Forget everything I've said about the context, I think I figured it out.

 //JCanvas source
 [...]
 else {
// Use URL if given to get the image
img = new Image();
img.crossOrigin = params.crossOrigin;
img.src = source; //<-- source is the url of my image ("images\pattern.png")
}

// Create pattern if already loaded
if (img.complete || imgCtx) { 
    onload(); //<-- When this runs, the image pops up perfectly fine
} else {
    img.onload = onload(); //<-- This is what causes the problem, 
                           //onload never seems to actually run 

            // Fix onload() bug in IE9
    img.src = img.src;
    }

The img.onload event should happen directly after an image loads, but it never seems to happen.

Flubber
  • 45
  • 1
  • 4

0 Answers0