title: Which way to create a canvas pattern from a dataToURL-image string as directly as possible?
body: <p>I'm using an image that I much previously had made by</p>
  
  <pre><code>var patternImageAsDataURL= canvasObject.toDataURL('image/png');
  </code></pre>
  
  <p>In a later stage I want to make a canvas pattern object. The following code doesn't work - I assume the image is simply not loaded when going to the last line, where it is needed in the createPattern function.</p>
  
  <pre><code>var img = document.createElement('img');
  img.src = patternImageAsDataURL;
  // canvasctx was created somewhere else in the program
  pattern = canvasctx.createPattern(img,'repeat');
  </code></pre>
  
  <p>I get the error: <code>NS_ERROR_NOT_AVAILABLE:</code> on the last line. (And when using console.log on width and heigth of <code>img</code> between the two last lines, I see when it's not working the dimensions are <code>0</code>.)</p>
  
  <p>When later on the same operation is done with the same dataURL, it does work. Though the image (img) should always be created anew. (Only reason I can see it's because of some internal optimization in Firefox. But that's offtopic here, unless someone does know the answer.) The width and height when printing them out to the console are correct then.</p>
  
  <p>While I will quite soon program some pattern handling service, that should solve this, my question is in general and for speed concerns and for simplicity. (If I use some code with like 20 to 50 objects with patterns, I would prefer a lean solution over a memory or time saving function.)</p>
  
  <blockquote>
    <p>Could I somehow use the dataURL more directly (and faster) for the
    createPattern function?
    And:
    Could I force the program to wait after the <code>img.src = patternImageAsDataURL;</code> command until the image is loaded, and then to go on processing the code? (Like in the synchronous mode of the XMLrequests.)</p>
  </blockquote>
  
  <p>(Using the onload event of the image isn't feasible in the current program flow.)</p>
  
  <p>This is running on Firefox 32, Win 7.</p>