Canvas.TextStyle as Outline

General
1

I want to draw text on a Canvas that allow me to print the outline with one color and the inside using another color like this:

file:///Users/emile_schwarz/Downloads/Tim%20Tyler’s%20Luck%20-%20Le%20grand%20dossier/Tim%20Tyler’s%20Luck%20-The%20Complete%20data/Tim%20Tyler’s%20Luck%20-%20List%20of%20the%20Daily%20Strips%20(1928%20to%201999)%20-%20(copie)/images/Tim_Tylers_Luck.png
This was done using a special font in TextEdit, snapshot the text, Paste in Gimp and Buckled Blue and Red where they are, then Copy / Paste the result in a square in Preview.

For a one shot, it’s OK, but if I want a different Font and more than one shot…

Possible ? How ?

PS; Outline apparentmly does not works:

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  g.FontSize = 24
  
  g.DrawingColor = Color.Red
  g.Outline = True
  g.DrawText("This is an Outlined text.",10,20)
  g.Outline = False
  
  g.DrawingColor = Color.Black
  g.DrawText("This is a Standard text.",10,50)
  End Sub

Result (part):

image
image574×192 12.4 KB

I painted an image to be sure the Canvas is drawn (in a non related project, only for testing) above a TextArea.

Tahoe 26.3.1 (a)
Xojo 2025r3.1
MacBook Pro M1 (5 years old !)

2

Answer I get elsewhere is:

  // 1. Setup Font
  g.FontName = "Arial"
  g.FontSize = 60
  g.Bold = True
  
  Var t As String = "OUTLINED TEXT"
  Var x As Integer = 50
  Var y As Integer = 100
  Var thickness As Integer = 2 // The thickness of your outline
  
  // 2. Draw the "Outline" by offsetting the black text
  g.DrawingColor = Color.Black
  
  // Draw in 4 directions to create a solid border
  g.DrawText(t, x - thickness, y) // Left
  g.DrawText(t, x + thickness, y) // Right
  g.DrawText(t, x, y - thickness) // Top
  g.DrawText(t, x, y + thickness) // Bottom
  
  // Optional: Draw diagonals for a smoother corner at large sizes
  g.DrawText(t, x - thickness, y - thickness)
  g.DrawText(t, x + thickness, y + thickness)
  g.DrawText(t, x - thickness, y + thickness)
  g.DrawText(t, x + thickness, y - thickness)
  
  // 3. Draw the main "Fill" text
  g.DrawingColor = Color.Red
  g.DrawText(t, x, y)

Result:

image
image1014×174 32.7 KB

That was the image as intended to paste far above, but gaves a “link”…:

image
image2002×280 103 KB

3

I haven’t tested your code, I only skimmed through it here in the forum…

Wouldn’t it have been simpler to do something like this, for example:

g.PenSize = 4
g.FontName = "Arial"
g.FontSize = 60
g.DrawingColor = Color.Black
g.Outline = True
g.DrawText( "OUTLINED TEXT", 10, 100 )
g.DrawingColor = Color.Red
g.Outline = False
g.DrawText( "OUTLINED TEXT", 10, 100 )
4

This bug has been addressed for 2026r1. It’s macOS Tahoe specific.

https://tracker.xojo.com/xojoinc/xojo/-/issues/80701

5

This does not works (and I do not rotate the graphics: nothing is drawn at all.
I wrote that in the opening post.

I have a solution, but will try 2026r1 when it will be released, just in case…