Jump to content

Canvas2D - Pictures


Recommended Posts

Hello !

I recently started to try Canvas2D, which will maybe replace my own "Panel" class. 
The goal is to "mimic" (is this correct word ?) an HTML webpage with some basic elements as <h2>, <p>, <img>

My main needs are :

- display text : easy and clean
- display pictures : can not manage to get it work ! :(
- play with CSS : easy as well :)

I created a playground : http://babylonjs-playground.com/#20MSFF#21

Do you know how to display pictures ? Do I have to create Sprite2D elements, even if I do not want to use Sprites or Animations ?
Or is there a solution for static pictures ?

Thanks in advance !

Be well,


@Nockawa If you come here ... :rolleyes:

Link to comment
Share on other sites

I've looked at your PG, and I now understand there's a bug in the Sprite2D which prevent to do what you're trying to.

I should have spent more time in this class for things to be easier. As I said in other threads the timing is not very good for me right now, because I'm moving back to my country and I'm pretty busy. I'll try a quick fix anyway and @Deltakosh will let you now when the PG is updated.


Link to comment
Share on other sites

Thank you very much to spend time on it, I appreciate.
I will check the playground when it will be updated.

Just one question : If I want to get your PR working on my machine without using Git, which files have I to download ?
Thank you again :)

PS : I'm moving back to France in few days as well, but BabylonJS follows me everywhere :D

Link to comment
Share on other sites

@Pouet I've fixed the issue, which was due to the fact I couldn't get the size of the texture the sprite was using because it wasn't loaded yet. It involved a new change in the Texture class, I've submit a PR, @Deltakosh will have to validate/merge and update the playground.

Concerning your question about how to get it working locally, well, the best way is to not use the babylon.js which is the overall library, but including all the .js files listed here: http://doc.babylonjs.com/generals/Creating_the_Mini-fied_Version

If you're using Visual Studio, you can follow this tutorial to set everything up: http://doc.babylonjs.com/generals/setup_visualStudio

Then after it's only an update of your local git repo from the official one to get the latest changes.

Link to comment
Share on other sites

Yeah, you rocks ! I faced some problems with the texture size indeed, but it's the first time I use Canvas2D so I though I was doing wrong because it's not an animated sprite like in the sample.

For the rest, I will use separate .js files as you said, so I will have to download the only modified file to make it working. Sounds good !

I'll wait for the commit, Thanks !

Link to comment
Share on other sites

just in case you want already start with experimenting with textures
this works for me

works better with video

dont know how the bugfix looks like, but leave the video for Canvas2d this is awesome, exactly what i need to build a smart webpage.

Edited by Nabroski
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...