createPattern method implementation

Question

I'm attempting to draw a filled rectangle that uses a pattern for the fillStyle. The following code allows one rect to be drawn, but after that, the drawing is thrown off for all subsequent actions.

This is the code that controls the fill:

var img = new Image();
img.src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR4Ag1va1Vm9Tynun8vY89CS1pY1eNMWGMxrc5efOIzEcQ-4IFa'
var pat = context.createPattern(img, 'repeat');
context.fillStyle = pat;

I suspect there's something about the createPattern method that I'm missing. Are there alternatives to what I'm trying to accomplish that don't use createPattern? I've noticed some examples use onload(); the value for img.src changes in my live environment, so I'm not sure if that would be relevant.

Fiddle: http://jsfiddle.net/Dvtz3/10/

ok, so it turns out the chrome security error is fixed once I run live rather than local, but instead of the rect filling in with a pattern, it's filling it solid. The fill patterns are working fine in FF

https://dl.dropbox.com/u/97446129/2-28/joined%2011-1/filltest.html

Answer 1

Viewing the error console, I see it full of SecurityErrors. This is because when you draw to the canvas, you are tainting it with a cross-origin image. This will disallow you from calling getImageData for security reasons, hence the "funky" result.