Displaying an image on a canvass

[Paul Curry]

Hi, I saw that this was asked earlier, but the solution does not seem to work anymore as it used JSConstructor(window.Image)() which throws an exception.

Here I am trying to draw an image onto the canvass with the html.IMG tag:

roleCanvas = html.CANVAS(id = "roleCanvas", width = GAME_WIDTH, height = GAME_HEIGHT)

ctx = roleCanvas.getContext("2d");

img = html.IMG("wall.jpg")

ctx.drawImage(img,200,200)

It throws an exception: 

Uncaught Error: TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Any help would be greatly appreciated. Thank you.

[Kiko]

2015-05-10 4:16 GMT+02:00 Paul Curry <paul.mich...@gmail.com>:

Hi, I saw that this was asked earlier, but the solution does not seem to work anymore as it used JSConstructor(window.Image)() which throws an exception.

Here I am trying to draw an image onto the canvass with the html.IMG tag:

roleCanvas = html.CANVAS(id = "roleCanvas", width = GAME_WIDTH, height = GAME_HEIGHT)

ctx = roleCanvas.getContext("2d");

img = html.IMG("wall.jpg")

I think you need to use the 'src' keyword here.

See a working example here:  http://jsfiddle.net/sef23exg/

 

ctx.drawImage(img,200,200)

It throws an exception: 

Uncaught Error: TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Any help would be greatly appreciated. Thank you.

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/5f382935-be14-4c8f-9e44-5dec16425374%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Paul Curry]

Even after I included that it would still throw the same exception. However I found if I used the 

.elt field on the img it wouldn't throw an error and if I alerted the img it would alert an "HTLMImageElement".

img = html.IMG(src = "wall.jpg")

ctx.drawImage(img.elt,0,0)

I think that is more correct. However I still cannot get it to display. 

Perhaps the image is not loading before drawImage is called? Would I need to attach an onload event handler?

[Kiko]

have a look to the jsfiddle link I posted in my previous email. I' m
just doing what you did but with the correct 'src' keyword and it
works as expected.

2015-05-10 19:40 GMT+02:00, Paul Curry <paul.mich...@gmail.com>:
> Even after I included that it would still throw the same exception. However
>
> I found if I used the
> .elt field on the img it wouldn't throw an error and if I alerted the img
> it would alert an "HTLMImageElement".
>
> img = html.IMG(src = "wall.jpg")
> ctx.drawImage(img.elt,0,0)
>
> I think that is more correct. However I still cannot get it to display.
> Perhaps the image is not loading before drawImage is called? Would I need
> to attach an onload event handler?
>
>
> On Sunday, May 10, 2015 at 12:30:01 AM UTC-7, kiko (on pybonacci) wrote:
>>
>>
>>
>> 2015-05-10 4:16 GMT+02:00 Paul Curry <paul.mich...@gmail.com

>> <javascript:>
>> >:

>>
>>> Hi, I saw that this was asked earlier, but the solution does not seem to
>>>
>>> work anymore as it used JSConstructor(window.Image)() which throws an
>>> exception.
>>>
>>> Here I am trying to draw an image onto the canvass with the html.IMG
>>> tag:
>>>
>>> roleCanvas = html.CANVAS(id = "roleCanvas", width = GAME_WIDTH, height =
>>>
>>> GAME_HEIGHT)
>>> ctx = roleCanvas.getContext("2d");
>>>
>>> img = html.IMG("wall.jpg")
>>>
>>
>> I think you need to use the 'src' keyword here.
>> See a working example here: http://jsfiddle.net/sef23exg/
>>
>>
>>> ctx.drawImage(img,200,200)
>>>
>>> It throws an exception:

>>> *Uncaught Error: TypeError: Failed to execute 'drawImage' on

>>> 'CanvasRenderingContext2D': The provided value is not of type
>>> '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or

>>> ImageBitmap)'*

>>>
>>> Any help would be greatly appreciated. Thank you.
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>>
>>> "brython" group.
>>> To unsubscribe from this group and stop receiving emails from it, send an
>>>

>>> email to brython+u...@googlegroups.com <javascript:>.

>>> To post to this group, send email to bry...@googlegroups.com

>>> <javascript:>.

>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/brython/5f382935-be14-4c8f-9e44-5dec16425374%40googlegroups.com
>>>

>>> <https://groups.google.com/d/msgid/brython/5f382935-be14-4c8f-9e44-5dec16425374%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .

>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
>

> --
> You received this message because you are subscribed to the Google Groups
> "brython" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to brython+u...@googlegroups.com.
> To post to this group, send email to bry...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/brython/584421f9-9d6d-4e94-8748-2e7b79ea740a%40googlegroups.com.

[Pierre Quentel]

Le dimanche 10 mai 2015 19:40:45 UTC+2, Paul Curry a écrit :

Even after I included that it would still throw the same exception. However I found if I used the 

.elt field on the img it wouldn't throw an error and if I alerted the img it would alert an "HTLMImageElement".

img = html.IMG(src = "wall.jpg")

ctx.drawImage(img.elt,0,0)

I think that is more correct. However I still cannot get it to display. 

Perhaps the image is not loading before drawImage is called? Would I need to attach an onload event handler?

Hi,

If you are using a recent clone of the development branch, this might be related to changes made recently to the implementation of DOM Node objects. There were a few regressions that I have just fixed in commit 3b8e6ff28913133304d12d01a563bb9c270980f4. Can you try with this version ?

- Pierre

[Paul Curry]

Got it to work. There were several problems. 

1st I was using brython 2.2.1 so there were some syntactical changes from the examples that work on here.

2nd I didn't have an load event handler to draw the image after it had loaded in

3rd I needed to use the .elt field of the image 

This is the code that worked for me.

img = html.IMG('', src="metalfencing.jpg")

img.bind('load', lambda e: ctx.drawImage(img.elt,0,0))

I appreciate everyone's response and help! One last question, does the JSConstructor object work properly in brython 2.2.1? Thanks!

[Kiko]

Is it mandatory to use Brython 2.2.1?

The new versions have a lot of improvements, better Python3 compatibility, more libraries ported, better performance,...

I think It would be better for you yo use a more modern version.

Kind regards.

P.D.: Also, in the following questions you may have, please, tell us the Brython version you are using ;-)

--

You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/cb86a1c6-a183-408d-a5ea-999b0133e9b5%40googlegroups.com.