how to avoid cross-domain security issues to draw a Facebook profile picture in a WebGL canvas?

I am experimenting with writing a Facebook game in HTML5, and am running up against the recent security changes in Chrome which prohibit the drawing of any cross-domain images on a WebGL canvas. I am not an expert on WebGL, and I'm hoping that there may be some way to do this which I'm overlooking.

For example, is it possible to use both the 2D canvas, AND a WebGL 3D canvas, at the same time? That's one way I could get around this issue...

Here are some more details:

In my game I want to draw the user's profile picture from Facebook. The photo is easily available at http://graph.facebook.com/[username]/picture. However, this is flagged as a cross-开发者_开发技巧domain picture, and thus this image is not allowed to be used as a WebGL texture.

Here is a simplified version of the code that causes the error:

var anImage = new Image();
anImage.src = "http://graph.facebook.com/notreallytheusername/picture";

... wait for image to load ...

var texture = gGL.createTexture();
gGL.bindTexture(gGL.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, anImage);

the last line above causes the security DOM exception...

any suggestions how to avoid this? How to draw a Facebook photo on top of a high performance WebGL game?

You won't be able to draw the picture unless the site serving the image opts in to the cross-origin request via CORS headers in the response (which Facebook does not do). Also, this behavior is not specific to Chrome; it's required by the current WebGL spec. You can find more information about the reasoning and impact of the change in this Chrome blog post.