Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Bulow
Posts: 13
Registered: ‎11-17-2012
My Device: developer (playbook and bb10)
My Carrier: NA

Images not showing in canvas on BB10

Hi, I am currently trying to get my html5 game to run on the bb10 simulator. It runs perfectly in chrome and internet explorer. I am able to get the app to run on the simulator but no images are displayed in the canvas. I have confirmed that the canvas itself is drawn (the background color shows) and that javascript is running (I can change the background color by clicking on the canvas). I have also confirmed that I can show the same images outside of the canvas in a normal <img/> element. The images are png and all file paths use the correct cases

 

Any ideas?

Please use plain text.
Contributor
howardwu
Posts: 32
Registered: ‎01-03-2011
My Device: Not Specified

Re: Images not showing in canvas on BB10

This may be the same issue in another thread, waiting for someone to answer:

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/canvas-not-drawing-on-bb10-alpha...

Please use plain text.
Trusted Contributor
basitj
Posts: 107
Registered: ‎04-08-2011
My Device: BlackBerry Q10
My Carrier: Mobilink

Re: Images not showing in canvas on BB10

Actually the whole Canvas is not showing up. If you're having the same issue, try following:

 

 

Okay guys, this looks like a bug in canvas implementation. The canvas does not become visible until you have a visible border. How's that?

 

So what I did, I used following code and the walla, canvas was visible.

 

Make sure the canvas border is 1px wide or you'll not see the canvas.

 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

 

Once you've added the border, the rest of the code works just the way you wanted :smileyhappy:

 

Hope this helps.

 

Cheers.

Get Speedometer on your phone. http://www.speedometer.mobi
Please use plain text.