Web vs Desktop picture.graphics drawing fontsize difference

When I run the following code in a desktop app I get this result

When I run the exact same code in a webapp I get this result

Is there any way to get the same result I get in the desktop app in the webapp, especially the fontsizes?

Dim bRefreshNeeded As Boolean=False Dim MyPic As Picture Dim iWidth As Integer=10 Dim iHeight As Integer=10 Dim dc As New Dictionary dc.Value("andy")=&c0000FF Do Dim tmppic As New Picture(iWidth,iHeight) tmppic.Graphics.ForeColor = &c0000004F tmppic.Graphics.FillRoundRect( 0, 0, tmppic.Graphics.Width, tmppic.Graphics.Height, 10, 10 ) tmppic.Graphics.ForeColor = &cFFFFFF tmppic.Graphics.TextFont = "Lucida Grande" tmppic.Graphics.TextSize=12 tmppic.Graphics.Bold = True Dim pL As new Picture( 10, 10 ) dim intWL as Integer = pL.Graphics.StringWidth( "Legend" ) tmppic.Graphics.DrawString( "Legend", tmppic.Graphics.Width / 2 - intWL / 2, tmppic.Graphics.TextSize + 4 ) tmppic.Graphics.Bold = False Dim p As new Picture( 10, 10 ) dim intLineWidth as Integer dim intY as Integer = tmppic.Graphics.TextSize + 10 tmppic.Graphics.TextFont = "Lucida Grande" tmppic.Graphics.TextSize=10 tmppic.Graphics.ForeColor = &cFFFFFF tmppic.Graphics.FillRect( 6, intY, 10, 10 ) tmppic.Graphics.ForeColor = &c0000FF tmppic.Graphics.FillRect( 6, intY, 10, 10 ) tmppic.Graphics.ForeColor = &c000000 tmppic.Graphics.DrawRect( 6, intY, 10, 10 ) tmppic.Graphics.ForeColor = &cFFFFFF tmppic.Graphics.DrawString( "andy (In): 24", 18, intY + tmppic.Graphics.TextSize - 2 ) dim intW as Integer = p.Graphics.StringWidth( "andy (In): 24" ) + 1 + 18 + 4 if intW > intLineWidth then intLineWidth = intW intY = intY + tmppic.Graphics.TextSize + 4 tmppic.Graphics.Bold = True if iWidth <> intLineWidth then iWidth = intLineWidth bRefreshNeeded=True Else Dim f As FolderItem 'If <> Nil Then // Get a file to save the image to If Picture.IsExportFormatSupported(Picture.FormatPNG) Then f = SpecialFolder.ApplicationData.Child("mywebpic.png") // Save the image out to the file tmppic.Save(f, Picture.SaveAsPNG) End If 'End If bRefreshNeeded=False end if iHeight=intY MyPic=tmppic Loop Until bRefreshNeeded=False

There are a couple of reasons this could be:
0. Console Graphics does not equal Desktop Graphics in all cases.
0. Make sure the TextUnits are the specified the same way between the two.
0. Make sure the font you are using exists on the machine where the web app is running.
0. This could just be a matter of where it is being drawn. If the desktop is Windows, the pixels per inch is 96, but browsers are usually 72 pixels per inch. That would account for the size change as well.

[quote=404108:@Greg O’Lone]There are a couple of reasons this could be:

  1. Console Graphics does not equal Desktop Graphics in all cases. [/quote]
    That’s what seems to be the case

[quote=404108:@Greg O’Lone]
2. Make sure the TextUnits are the specified the same way between the two. [/quote]
I used exactly the same code in both the Webapp and the desktop app

[quote=404108:@Greg O’Lone]
3. Make sure the font you are using exists on the machine where the web app is running. [/quote]
both the webapp and the desktop app were tested on the same Mac and the font exists on this Mac

[quote=404108:@Greg O’Lone]
4. This could just be a matter of where it is being drawn. If the desktop is Windows, the pixels per inch is 96, but browsers are usually 72 pixels per inch. That would account for the size change as well.[/quote]
Like I said this was done on Mac. I just checked the resolution of the tmppic in both programs and it’s 72dpi in both

<https://xojo.com/issue/53237>

The whole thing looks larger. Is the result of a web canvas subject to browser zoom, @Greg O’Lone ?

No. He’s rendering into picture objects. They’re physically different from one another.

These are known issues. Text-Handling in Graphics differs a lot from Desktop to Console Framework. Maybe the following information can give you a start:

  • Console Apps do not ‘see’ the same Fonts as Desktop apps, do and they may have different names: <https://xojo.com/issue/49033> - setting the environment variable $GDFONTPATH can help to find the Font file, then enumerate the available Font names using the global Font(index) and FontCount Methods. After setting the Graphics.TextFont, .Bold and .Italic properties, I usually check TextAscent for being <> 0 to see if the Font was successfully loaded or not
  • Graphics.TextUnit seems to be unsupported in Console and always use Pixel: <https://xojo.com/issue/26147> so convert the .TextSize yourself to Pixel
  • With these you should be able to get a reasonable approximation of the Desktop drawing and sizing, at least on the Mac and for StringWidth. StringHeight is still way off: <https://xojo.com/issue/38272>

I’ll try it as soon as I find time. Thanks for the advice.

Still not perfect, but much better result based on the advice by @Tobias Bussmann
Thanks for that.