createElement-wrapped <img> throws TypeError on <canvas> drawImage

[maxhawkins]

I'm trying to draw an image I created with document.createElement('img') to a canvas, but Polymer is getting in the way. Polymer's createElement wrapper causes a typeError on drawImage.

Here's a jsfiddle. When I remove the Polymer import the problem goes away:
http://jsfiddle.net/LbZES/

[sjmiles]

ShadowDOM polyfill produces virtualized nodes from JavaScript apis, so that your programming interface is to the 'enhanced' tree.

The upshot of this is that your img reference is to a virtualized node that is not compatible with ctx.drawImage (at least today; in the future the canvas api may be wrapped as well).

window.(un)wrap are provided to translate between virtualized and native nodes.

Try doing this instead: ctx.drawImage(unwrap(img))

http://jsfiddle.net/LbZES/1/

[arodic]

I'm experiencing the same problem when loading image textures with three.js library (both canvas2d and webgl context).

It returns type error on
_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, glFormat, glType, texture.image );

http://jsfiddle.net/fpENF/6/

[kaosat-dev]

Same issue here with three.js + polymer as well :
All calls to drawImage are affected of course, but also as pointed out by @arodic above, a lot of texture.image uses as well :
By the way, I manually put unwrap() calls around problematic code @sjmiles , and it does solve the issue, although it seems cumbersome to modify external libs this way: any other possible workaround ? :)

[dfreedm]

Looks like googlearchive/ShadowDOM#274 should wrap 2d and 3d canvas operations.

[arodic]

@azakus @arv I tried building the latest polymer to confirm this was fixed but now I can't create WebGL renderer (three.js) from within the shadow dom.

http://arodic.github.com/temp/polymer-bug/webgl-bug.html

<polymer-element name="webgl-bug">
    <template>
    </template>
    <script>
        Polymer('webgl-bug', {
            renderer: new THREE.WebGLRenderer()
        });
    </script>
</polymer-element>

[arodic]

It looks like the latest release (0.0.20131025) shipped with this bug so three.js renderer does not work with polymer elements anymore:
http://jsfiddle.net/xWRgY/3/

[arv]

https://github.com/Polymer/ShadowDOM/issues/283

On Mon, Oct 28, 2013 at 1:12 AM, arodic [email protected] wrote:

It looks like the latest release (0.0.20131025) shipped with this bug so
three.js renderer does not work with polymer elements anymore:
http://jsfiddle.net/xWRgY/3/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/316#issuecomment-27189912
.

erik

[arodic]

It appears that some canvas2D calls are still missing from polymer-wrapped canvas:

context.font(), context.fillStyle() and possibly others...

http://jsfiddle.net/xWRgY/5/
This fiddle should display text in big blue letters.

[arv]

googlearchive/ShadowDOM#298

On Mon, Nov 4, 2013 at 7:46 PM, arodic [email protected] wrote:

It appears that some canvas2D calls are still missing from polymer-wrapped
canvas:

context.font(), context.fillStyle() and possibly others...

http://jsfiddle.net/xWRgY/5/
This fiddle should display text in big blue letters.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/316#issuecomment-27737903
.

erik

[arv]

Fixed