B4J Question [ABMaterial] strokeStyleRadialGradient doesnt work on Chrome

[MbedAndroid]

it should work according this side, checked on Chrome https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_createradialgradient

however on Chrome i see this:

all other painting is gone.
removing thie StrokeStyleRadialGradient line solved the problem. But then the gradient is missing.
Could this be a bug in ABM ?(i know unthinkable, but just the question)
used code:

   Radius = Radius * 0.9
   Dim angle=(180-alfa)*cPI/180 As Double

  

'   // draw face
   compas.translate(Radius,Radius)
   compas.beginPath
   compas.arc(0,0,Radius, 0, 2*cPI)
   compas.fillStyleColor("#0000ff")
'   compas.strokeStyleRadialGradient(0,0,Radius*0.95,0,0,Radius*1.05, Array As Double(0,0.5,1), Array As String("#333", "white", "#7733"))
   compas.fill
   compas.lineWidth(Radius*0.1)
   compas.stroke

'   'draw needle
   compas.rotate(-angle) 'rotate first the picture
   compas.beginPath
   compas.lineWidth(1)
   compas.moveTo(-10,0)
   compas.lineTo(0,Radius*0.65)
   compas.lineTo(0,0)
   compas.lineTo(-10,0)
   compas.fillStyleColor("#ffff00")
   compas.fill
'
   compas.beginPath
   compas.moveTo(10,0)
   compas.lineTo(0,Radius*0.65)
   compas.lineTo(0,0)
   compas.lineTo(10,0)
   compas.fillStyleColor("#ff0000")
   compas.fill
'
   compas.rotate(angle) 'then rotate the picture back. The needle will be moved, the dial is back on its place
'
   compas.fillStyleColor("#ffffff")
   compas.font("arial", Radius*0.10)
   compas.textBaseline(ABM.CANVAS_TEXTBASELINE_MIDDLE)
   compas.textAlign(ABM.CANVAS_TEXTALIGN_CENTER)
   Dim const Bearing() As String=Array As String ("N","NNW","NW","WNW","W","WZW","ZW","ZZW","Z","ZOZ","ZO","OZO","O","ONO","NO","NNO")
  
   Dim ang As Double
   For num = 0 To  15
     ang = -num * cPI / 8
     compas.rotate(ang)
     compas.translate(0, -Radius*0.75)
     compas.rotate(-ang)
     compas.fillText("" & Bearing(num), 0, 0)
     compas.rotate(ang)
     compas.translate(0, Radius*0.75)
     compas.rotate(-ang)
   Next
   'draw center
   compas.beginPath
   compas.fillStyleColor("#ffff00")
   compas.arc(0,0,Radius*0.1,0,2*cPI)
   compas.fill
   'draw wind (knts)
   compas.fillStyleColor("#ffff00")
   compas.fillText(knts&" knts",0,Radius*0.5)

 

[alwaysbusy]

i know unthinkable

"Nothing is impossible. Not if you can imagine it." -- Professor Hubert Farnsworth - Futurama

I'll have a look at it later today.

 

[alwaysbusy]

Isn't it because you do the compas.fill AFTER setting the gradient?

compas.translate(Radius,Radius)
compas.beginPath
compas.arc(0,0,Radius, 0, 2*cPI)
compas.fillStyleColor("#0000ff")
compas.fill ' <------ added ------
compas.strokeStyleRadialGradient(0,0,Radius*0.95,0,0,Radius*1.05, Array As Double(0,0.5,1), Array As String("#333", "white", "#7733")) 
' compas.fill ' <------ removed ------
compas.lineWidth(Radius*0.1)
compas.stroke

 

[MbedAndroid]

removing the fill statement gives this in FF

and this in Chrome:

so it isnt the fill statement

 

[MbedAndroid]

even when i set the fill statement before the gradient statement doesnt change anything on Chrome.

 

[alwaysbusy]

There must be something wrong in your code. This is the result I get in the demo:

Sub BuildClock() As ABMCanvasObject
   Dim clock As ABMCanvasObject
   Dim Radius As Double = 150
   
   clock.InitializeAsRectangle(page, "clock", 0,0,300,300, True)
   
   Radius = Radius * 0.9
   
   ' make background transparent
   clock.clearRect(0,0,300,300)
     
   ' draw face
   clock.translate(150,150)
   clock.beginPath
   clock.arc(0,0,Radius, 0, 2*cPI)
   clock.fillStyleColor("#0000FF")
   clock.fill
   clock.strokeStyleRadialGradient(0,0,Radius*0.95,0,0,Radius*1.05, Array As Double(0,0.5,1), Array As String("#333", "white", "#333"))
  clock.lineWidth(Radius*0.1)
     clock.stroke()
   
     clock.beginPath
     clock.arc(0, 0, Radius*0.1, 0, 2*cPI)
     clock.fillStyleColor("#333")
     clock.fill
   
   'draw numbers
    clock.font("arial", Radius*0.15)
      clock.textBaseline(ABM.CANVAS_TEXTBASELINE_MIDDLE)
      clock.textAlign(ABM.CANVAS_TEXTALIGN_CENTER)
    Dim ang As Double
      For num = 1 To 12
     ang = num * cPI / 6
     clock.rotate(ang)
     clock.translate(0, -Radius*0.85)
     clock.rotate(-ang)
     clock.fillText("" & num, 0, 0)
     clock.rotate(ang)
     clock.translate(0, Radius*0.85)
     clock.rotate(-ang)
     Next
   
   ' draw time
   Dim hour As Double = DateTime.GetHour(DateTime.Now)
   Dim minute As Double = DateTime.GetMinute(DateTime.Now)
   Dim second As Double = DateTime.GetSecond(DateTime.Now)
   hour = hour Mod 12
   hour = (hour*cPI/6)+(minute*cPI/(6*60))+(second*cPI/(360*60))   
   BuildHand(clock, hour, Radius*0.5, Radius*0.07)
   minute=(minute*cPI/30)+(second*cPI/(30*60))
   BuildHand(clock, minute, Radius*0.8, Radius*0.07)
   second=(second*cPI/30)
   BuildHand(clock, second, Radius*0.9, Radius*0.02)
   
   Return clock
End Sub

Sub BuildHand(clock As ABMCanvasObject, pos As Int, length As Double, width As Double)
   clock.beginPath
  clock.lineWidth(width)
  clock.lineCap(ABM.CANVAS_LINECAP_ROUND)
  clock.moveTo(0,0)
  clock.rotate(pos)
  clock.lineTo(0, -length)
  clock.stroke
  clock.rotate(-pos)
End Sub

 

[MbedAndroid]

will check the clock and let you know Alain

 

[MbedAndroid]

it's the color number in gradient statement
i changed it to 7733, in the example it's 333.

 

[alwaysbusy]

it's the color number in gradient statement

Indeed! I hadn't noticed it either. A color in html is either 3 long, or 6. 4 doesn't mean anything. Glad you got it and thanks for sharing your components. Very cool!

 

[MbedAndroid]

so in fact it wasnt a unthinkable ABM bug, but Chrome which doesnt protect stupid programmers which assume when you type #7733 it will be accepted as #007733