• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

HTML5: DrawText

Wingnut

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,414
This is an old bug I I found that never got fixed.
DrawText does not work with imagecanvases on HTML5

Cerberus:
Import mojo2

Function Main()
    New MyApp
End

Global canvas:Canvas
Global image:Image
Global imagecanvas:Canvas
Global image2:Image
Global imagecanvas2:Canvas
Global image3:Image
Global imagecanvas3:Canvas

Class MyApp Extends App

    Field refresh:Int
    
    Method OnCreate()
        canvas=New Canvas
        image=New Image(128,64,0,0)
        image2=New Image(128,64,.5,.5)
        image3=New Image(238,64,1,1)
        imagecanvas=New Canvas(image)
        imagecanvas2=New Canvas(image2)
        imagecanvas3=New Canvas(image3)
        createimages()
        createimages()
        SetUpdateRate 0
    End Method
    
    Method OnUpdate()
    End Method
    
    Method OnRender()
        canvas.Clear 0,0,0
        canvas.DrawImage image,DeviceWidth()/2,50
        canvas.DrawImage image2,DeviceWidth()/2,50+96
        canvas.DrawImage image3,DeviceWidth()/2,50+(96*2)
        canvas.Flush
    End
    
End Class

Function createimages()
    imagecanvas.Clear
    imagecanvas.SetColor(0.1,0.1,0.1,1)
    imagecanvas.DrawRect(0,0,image.Width(),image.Height())
    imagecanvas.SetColor(1,1,1)
    imagecanvas.DrawText("Image...1",0,0)
    imagecanvas.Flush
    imagecanvas2.Clear
    imagecanvas2.SetColor(1,1,1,1)
    imagecanvas2.DrawRect(0,0,image.Width(),image.Height())
    imagecanvas2.SetColor(0,0,0,1)
    imagecanvas2.DrawText("Image...2",0,0)
    imagecanvas2.Flush
    imagecanvas3.Clear
    imagecanvas3.SetColor(1,1,1,1)
    imagecanvas3.DrawRect(0,0,image.Width(),image.Height())
    imagecanvas3.SetColor(0,0,0,1)
    imagecanvas3.DrawText("Image...3",0,0)
    imagecanvas3.Flush
End Function
 
Actually this code might be a better example, as i'm not sure how okay it is to use actual clearing and other rendering in onCreate.

Same result as above!

Cerberus:
Import mojo2

Function Main()
    New MyApp
End

Global canvas:Canvas
Global image:Image
Global imagecanvas:Canvas
Global image2:Image
Global imagecanvas2:Canvas
Global image3:Image
Global imagecanvas3:Canvas

Class MyApp Extends App

    Field refresh:Int
    Field init:Bool = True
   
    Method OnCreate()
        canvas=New Canvas
        image=New Image(128,64,0,0)
        image2=New Image(128,64,.5,.5)
        image3=New Image(238,64,1,1)
        imagecanvas=New Canvas(image)
        imagecanvas2=New Canvas(image2)
        imagecanvas3=New Canvas(image3)
        ' createimages()
        ' createimages()
        SetUpdateRate 0
    End Method
   
    Method OnUpdate()
    End Method
   
    Method OnRender()
   
        If init = True
            init = False
            createimages()
            createimages()
        Endif
       
        canvas.Clear 0,0,0
        canvas.DrawImage image,DeviceWidth()/2,50
        canvas.DrawImage image2,DeviceWidth()/2,50+96
        canvas.DrawImage image3,DeviceWidth()/2,50+(96*2)
        canvas.Flush
    End
   
End Class

Function createimages()
    imagecanvas.Clear
    imagecanvas.SetColor(0.1,0.1,0.1,1)
    imagecanvas.DrawRect(0,0,image.Width(),image.Height())
    imagecanvas.SetColor(1,1,1)
    imagecanvas.DrawText("Image...1",0,0)
    imagecanvas.Flush
    imagecanvas2.Clear
    imagecanvas2.SetColor(1,1,1,1)
    imagecanvas2.DrawRect(0,0,image.Width(),image.Height())
    imagecanvas2.SetColor(0,0,0,1)
    imagecanvas2.DrawText("Image...2",0,0)
    imagecanvas2.Flush
    imagecanvas3.Clear
    imagecanvas3.SetColor(1,1,1,1)
    imagecanvas3.DrawRect(0,0,image.Width(),image.Height())
    imagecanvas3.SetColor(0,0,0,1)
    imagecanvas3.DrawText("Image...3",0,0)
    imagecanvas3.Flush
End Function
 
2014 in a Monkey-X forum from the internet archive, this is all information there was on it.
 
If it is of any help I tried to find the bug tonight and got halfway there kind of.

_font._pages[tmpChar.page] seem to have wrong id or is cleared I think the first round. If you do it later like here, it works.
So it's just the first round it's not initialised or something and HTML5 is sensitive to it.

EDIT, not quiet, it needs to go through the OnRender around 3-5 times before it works. Updated the example below!

Cerberus:
Import mojo2

Function Main()
    New MyApp
End

Class MyApp Extends App

    Global image2:Image
    Global imagecanvas2:Canvas
    Global image3:Image
    Global imagecanvas3:Canvas
    Field sourceImage : Image
    Field targetImage : Image
    Field canvas : Canvas
    Field effect : ShaderEffect
    Field level : Float = 1
    Field init:Int = 0
   
    Method OnCreate()
        effect = New ShaderEffect
        canvas = New Canvas
        image2=New Image(256,256,1,1)
         imagecanvas2=New Canvas(image2)
             image3=New Image(256,256,1,1)
         imagecanvas3=New Canvas(image3)
         SetUpdateRate 0
    End
   
    Method OnRender()
        If init = 5 ' lowest that html5 works with, it needs to do 3-4 OnRender sometimes longer, before HTML5 drawtext works on imagecanvas
             createimages()
        Endif
           
        canvas.Clear 0, 0.5, 1, 1
        canvas.SetBlendMode BlendMode.Alpha
           
        ' test with other flush       
        canvas.DrawImage image2,256,256
        canvas.DrawImage image3,256+256,256

        canvas.Flush
        init = init + 1
    End
   
    Method createimages()
   
        ' shader reads from
        imagecanvas3.Clear
        imagecanvas3.SetColor 1,1,1,1
        imagecanvas3.DrawRect 0,0,image2.Width(),image2.Height()
        imagecanvas3.SetColor 0,0,0,1
        imagecanvas3.DrawText "Image...2",0,0
        imagecanvas3.Flush

        ' shader writes to
        imagecanvas2.Clear
        imagecanvas2.SetColor 1,1,1,1
        imagecanvas2.DrawRect 0,0,image2.Width(),image2.Height()
        imagecanvas2.SetColor 0,0,0,1
        imagecanvas2.DrawText "Image...2",0,0
        imagecanvas2.Flush
    End

End

Class myShader Extends Shader

    Method New()
        Build(LoadString("shader.glsl"))
    End   
   
    Method OnInitMaterial:Void(material:Material)
        material.SetTexture "ColorTexture",Texture.White()
        material.SetScalar "EffectLevel",1
    End
   
    Function Instance:myShader()
        If Not _instance _instance=New myShader
        Return _instance
    End
   
    Private
   
    Global _instance:myShader
End

Class ShaderEffect
    Private
    Global _canvas:Canvas
    Field _material:Material
   
    Method New()
        If Not _canvas _canvas=New Canvas

        _material=New Material(myShader.Instance())
    End
   
    Method SetLevel:Void(level:Float)
        _material.SetScalar "EffectLevel",level
    End
   
    Method Render:Void(source:Image,target:Image)
        _material.SetTexture "ColorTexture",source.Material.ColorTexture
        _canvas.Clear 0, 0, 0, 0
        _canvas.SetRenderTarget target
        _canvas.SetViewport 0,0,target.Width,target.Height
        _canvas.SetProjection2d 0,target.Width,0,target.Height
        _canvas.DrawRect 0,0,target.Width,target.Height,_material
        _canvas.Flush
    End
   
End
 
Last edited:
Jimmy, with all respect. I will not look into this right away. Why?!
I just posted a few days ago what is needed in bug report. An attachment aka zip file with ALL files needed so we can reproduce the behaviour.
Also when you report a bug you tend to spam it with new versions of some code. Don't do that.
In the last one you load some kind of shader. How should i know what you do there?
The example in itself is incomplete. On my phone I don't see a main function. And is the shader thing even called?
Sorry, but now I have to make up my own test code AGAIN, when I have time for it.
 
I'm not used to bug reports I will start using Git instead soon so I can work on revisions without the mess.
okay but for this one, What about this for completeness. N files needed and I made it as short as possible.

Cerberus:
Import mojo2
Function Main()
    New MyApp
End

Class MyApp Extends App

    Global image2:Image
    Global imagecanvas2:Canvas
    Field canvas : Canvas
    Field init:Int = 0
 
    Method OnCreate()
        canvas = New Canvas
        image2=New Image(256,256,1,1)
        imagecanvas2=New Canvas(image2)
         SetUpdateRate 0
    End
 
    Method OnRender()
   
        If init = 5 Then createimages() ' a delay of few frames needed to drawtext on html5 imagecanvas
       
        canvas.Clear 0, 0.5, 1, 1
        canvas.DrawImage image2,256,256
            canvas.Flush
        init = init + 1
    End
 
    Method createimages()
        imagecanvas2.Clear
        imagecanvas2.SetColor 1,1,1,1
        imagecanvas2.DrawRect 0,0,image2.Width(),image2.Height()
        imagecanvas2.SetColor 0,0,0,1
        imagecanvas2.DrawText "Image...2",0,0
        imagecanvas2.Flush
    End
End
 
Yes that is better. And my appologies, the main is there even in your second last example. You don't need to use GH. Here is fine.
 
No harm done, I know I posted too quickly last night.I tried to offload some of the work ina bughunting frenzy and accidentally posted the wrong code. Oh well we're only human.
 
Back
Top Bottom