1

I want to set a fill to my rectangle in Fabric.js like this:

myRect.fill = new fabric.Pattern({
  source: myImg //myImg was loaded previously in another
                //fabric.util.loadImage block
});

My image is being loaded correctly before this code block is run. I've looked up the demos for patterns at Fabric.js website. There the pattern is set within a fabric.util.loadImage block.

So the following code works fine for me:

fabric.util.loadImage('myImg.png', function(img) {
  myRect.fill = new fabric.Pattern({
    source: img
  });
});

I want to understand why I can't set the source afterwards without using fabric.util.loadImage. Is there an option with setting the fill using an already loaded image?

kangax
  • 38,898
  • 13
  • 99
  • 135
TNT-Boy
  • 48
  • 9
  • It's simple. The image needs to be loaded before it can be used as a pattern. If it's not working, I'm pretty sure image is not yet loaded. `loadImage` guarantees that the image is loaded which is why you see it working. – kangax Dec 13 '13 at 15:01
  • @kangax Thanks! This is what I thought of. Actually I used a method to check if all my images are loaded. I was inspired by this post of you: [link](http://stackoverflow.com/questions/6939782/fabric-js-problem-with-drawing-multiple-images-zindex). Let's say I set my fill in the `checkAllLoaded` function - so it's not guaranteed that the image is loaded when I set the fill there? I assume it has to do something with callback right? The `function(img)` is fired when it's made sure that the image is fully loaded. I think I get it now. Thanks very much! – TNT-Boy Dec 13 '13 at 15:38

0 Answers0