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
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified
Accepted Solution

canvas not drawing on bb10 alpha simulator

 

Anyone know the trick to get canvas drawing to appear on the bb10 alpha simulator?

My own program and samples such as brickbreaker and sketchpad just appear blank but run fine in ripple.

Help please!

 

Developer
smartek
Posts: 281
Registered: ‎05-31-2012
My Device: Playbook

Re: canvas not drawing on bb10 alpha simulator

I have exactly the same problem!

Plase "+Like" my post if it was helpful.
BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: canvas not drawing on bb10 alpha simulator

Hello,

 

Would you be able to provide us some sample code, so we can test it out here?

 

http://jsfiddle.net/

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Contributor
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified

Re: canvas not drawing on bb10 alpha simulator

Well I said the sketchpad sample so get the full source from the RIM links:

https://developer.blackberry.com/html5/sampleapps/

The links take me to the old code even though it now has a BB10 symbol so would have expected updates but didn't find any.     Are others getting old webworks to run on BB10 without changes?   I assume not.

 

To get things updated for BB10 I modified the config.xml, and index, and .js based on the other examples for bb10.

viewport set via script, added webworks .js, added a canvas container and instead of creating the canvas in the .js
just fetch it so the last lines of the .js are pasted below (which seem to make ripple happy and it
runs fine on a real playbook, just don't have an alpha device so the simulator showing nothing makes me think it may work differently.

 

index.html

...

<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0"-->
    
    <title> sketchPad </title>
    
    <link href="css/sketchpad.css" rel="stylesheet" type="text/css">        
    <script>
      var meta = document.createElement("meta");
      meta.setAttribute('name','viewport');
      meta.setAttribute('content','width=device-width,height=device-height,initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
      document.getElementsByTagName('head')[0].appendChild(meta);
  </script>
      <script type="text/javascript" src="webworks-1.0.2.9.js"></script>
    <script type="text/javascript" src="js/sketchpad.js"></script>
</head>
<body>
    <div id="container">
      <div id="canvas" >
       <canvas id="drawCanvas"  ></canvas>
      </div>
        </div>    
</body>
</html>

 

sketchpad.js.

...

    //fetch a canvas that covers the entire screen:

    canvas = document.querySelector('#drawCanvas');
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;

    ctx = canvas.getContext("2d");
    
    displayHeader("Touch the screen or move pointer to begin (Double tap screen to clear)");
    panel_size = canvas.width/numButtonsInPanel;
    drawPanel();
}

window.addEventListener("DOMContentLoaded", function(e) { document.addEventListener("webworksready", doPageLoad); }, false);

 

BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: canvas not drawing on bb10 alpha simulator

Figured it out... it's a CSS issue.  Add this to sketchpad.css

 

body, html {
	height: 100%;
	width: 100%;
}

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Contributor
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified

Re: canvas not drawing on bb10 alpha simulator

 

Hmmmm, I still get just the white screen.   Was it white before you added those lines?

Any other changes than the ones I pasted.  In the config.xml I added:

 

      <!-- BB10 -->
    <feature id="blackberry.app.orientation">
        <param name="mode" value="landscape" />
    </feature>

 

If your BB10 simulator draws it fine then maybe it's my machine & graphics card?

If it works for you maybe you should update the samples code on git anyway with your changes.

 

 

BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: canvas not drawing on bb10 alpha simulator

Forgot to mention that I did add a BlackBerry 10 config.xml as well, instead of the PlayBook one.  It was a white-screen before I made the CSS changes, yes.

 

https://developer.blackberry.com/html5/documentation/code_sample_creating_a_bb_widget_config_documen...

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Contributor
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified

Re: canvas not drawing on bb10 alpha simulator

 

Thanks again for your efforts, still no luck for me using that config.xml .... guess I need to wait and try to get a real device.

Contributor
howardwu
Posts: 32
Registered: ‎01-03-2011
My Device: Not Specified

Re: canvas not drawing on bb10 alpha simulator

I am confronted with the same issue.

The canvas element doesn't draw on BB10 simulator, but fine in Ripple.

 

I also tried the Sketch sample, but  the same situation. It went into blank white screen in BB10 simulator.

 

@bdev222, have you found any workaround?

Contributor
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified

Re: canvas not drawing on bb10 alpha simulator

Sorry no work around I found yet.  At the port-a-thon others reported the same issue and RIM guys also mentioned
there was a known issue.  Some people said large canvas's failed but quite small ones worked on the sim so you could try a very tiny one as a test case.  The same code draws on a real playbook and I'll know shortly if the app
I submitted for the dev alpha (that were blank on the sim) get rejected and will post.  Otherwise we just have to wait for

a simulator update.

cheers