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
Highlighted
Contributor
Posts: 12
Registered: ‎10-13-2012
My Device: Playbook
My Carrier: Comcast (WiFi)

Problems with canvas on Dev Alpha B device

 

I am using:

BlackBerry 10 WebWorks SDK 1.0.4.11

Dev Alpha B Device with OS version: 10.9.10.35

 

I have a drawing program that I am porting from the blackberry playbook.  I am having the  following canvas problems: 1. erase ('destination-out') does not work. 2. globalAlpha is ignored for fill (ie ctx.fillRect(), ctx.fill()).

3. Drawing circles (ctx.arc()) not filling in the stroke. Just the outline of the stroke is shown.  All of this functionality worked fine for the playbook, but not on my dev alpha b device. 

 

Here are some details:

 

1. erase (Ctx.globalCompositeOperation = 'destination-out') not working.  When I have the globalCompositeOperation set to 'source-over' a line will be drawn.  But when I switch the value to 'destination-out' no line is erased.  Nothing happens.  This functionality worked for the playbook.

 

code example:

    

    ctx.beginPath();
    ctx.moveTo(xList[0],yList[0]) ;

      for (i=1; i < xList.length; i++){
            ctx.lineTo(xList[i],yList[i]) ;
        }
        ctx.stroke() ;
        ctx.closePath();

 

This works when

ctx.globalCompositeOperation = 'source-over'

 

but not when

ctx.globalCompositeOperation = 'destination-out'

 

 

2.  Global alpha not working for fill.  ie:

 

   ctx.globalAlpha = .5;

   ctx.fillStyle = activeColor;

   ctx.fillRect(0,0,canvasWidth,canvasHeight);

 

results in my canvas being filled in with a completely opaque color.  Note that the globalAlpha setting works correctly when I draw a line as specified in the problem above.

 

3. Circles not being drawn correctly. ie.

  

   ctx.lineWidth = brushSize;

   ctx.arc(xList[0], yList[0], 1, 0, 2 * Math.PI, true);

   ctx.stroke() ;

   ctx.closePath();

 

This results in a circle with a diameter the size of "brushSize".  But the circle is not filled in, only the an outline of the circle appears.

 

I tried the following work-around (reduce the lineWidth, and set the radius to half the brushSize):

 

   ctx.lineWidth = .0001;

   ctx.arc(xList[0], yList[0], brushSize/2, 0, 2 * Math.PI, true);

   ctx.stroke() ;

    ctx.fill();

 

This gets me my filled in circle at the desired size.  But the globalAlpha setting is ignored. (see problem #2)

 

 

All of the above functionality works fine on the playbook, as well as in the firefox browser.  Could this a problem with my device?  I've walked through the Web Inspector debugger, and all the settings are being set correctly, and the function calls are being made. 

 

Anyone else encounter similar problems?

 

 

BlackBerry Development Advisor
Posts: 42
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: Problems with canvas on Dev Alpha B device

Just tried out a globalCompositeOperation sample on a Z10 and Q10 using just the BB10 browser using a couple internal builds and it does look like we have some issues to work out. The sample I used is at https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html if you are curious. I haven't had a chance to test out your other 2 issues yet.

 

Could you post a complete code sample for your each of your issues? I want to make sure I have proper test cases when I submit this issue.

 

If you don't want to post them publicly can you email them to me at rcraigbarnes@blackberry.com?

 

Thanks

Rory

--
System Software Developer II - Enterprise R&D

@roryboy

1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)
BlackBerry Development Advisor
Posts: 42
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: Problems with canvas on Dev Alpha B device

I just had a chance to try out your other two issues (with hopefully similar code since I don't have the complete version of yours) and I don't see any issues on a recent internal builds on a Z10 & Q10. So these may still fail on your device but they do work in upcoming releases.

 

Issue 2 - I tried two different examples and both work as expected:

            function draw() {
                var ctx = document.getElementById('canvas').getContext('2d');
                ctx.globalAlpha = 0.5;
                ctx.fillStyle = '#000';
                ctx.fillRect(0,0,150,150);
               
               var ctx3 = document.getElementById('canvas3').getContext('2d');
                // draw background
                ctx3.fillStyle = '#FD0';
                ctx3.fillRect(0,0,75,75);
                ctx3.fillStyle = '#6C0';
                ctx3.fillRect(75,0,75,75);
                ctx3.fillStyle = '#09F)';
                ctx3.fillRect(0,75,75,75);
                ctx3.fillStyle = '#F30';
                ctx3.fillRect(75,75,150,150);
                ctx3.fillStyle = '#FFF';

                // set transparency value
                ctx3.globalAlpha = 0.2;

                // Draw semi transparent circles
                for (i=0;i<7;i++){
                    ctx3.beginPath();
                    ctx3.arc(75,75,10+10*i,0,Math.PI*2,true);
                    ctx3.fill();
                }
            }
            draw(); 

 Issue 3:

 

          function draw(){      
var ctx2 = document.getElementById('canvas2').getContext('2d'); for (i=0;i<4;i++){ for(j=0;j<3;j++){ ctx2.beginPath(); var x = 25+j*50; // x coordinate var y = 25+i*50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle var clockwise = i%2==0 ? false : true; // clockwise or anticlockwise ctx2.arc(x,y,radius,startAngle,endAngle, clockwise); if (i>1){ ctx2.fill(); } else { ctx2.stroke(); } } }
}
draw();

 Rory

 

--
System Software Developer II - Enterprise R&D

@roryboy

1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)