# Canvas1.DrawString vertically centered **URL:** \ **Category:** General\ **Created:** [August 13, 2021, 9:08am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020 "2021-08-13T09:08:58Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Emile\_Schwarz](https://forum.xojo.com/letter_avatar_proxy/v4/letter/e/90ced4/32.png) [@Emile\_Schwarz](https://forum.xojo.com/u/Emile_Schwarz)\ **Post date:** [August 13, 2021, 9:08am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/1 "2021-08-13T09:08:58Z")
Centering text HORIZONTALLY is super easy. ```auto x = (PrintArea.Width - String.Width) / 2 ``` But doing so vertically is a totally different beast. I tried ad nauseam different code and failed. My target Canvas have a user setting background color, so I can see if the text is centered… (h and v) I can change the string Size and the Font Name… At this stage, I am exhausted. Usually, I only have to do other things for a day or two, then when I came back I know how to do, but this time, the only color I get is black (or blue ?). ---
**Author:** ![Anthony\_G\_Cyphers](https://forum.xojo.com/user_avatar/forum.xojo.com/anthony_g_cyphers/32/16862_2.png) [@Anthony\_G\_Cyphers](https://forum.xojo.com/u/Anthony_G_Cyphers)\ **Post date:** [August 13, 2021, 9:13am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/2 "2021-08-13T09:13:55Z")
You need to account for the baseline of the string using `g.FontAscent`. Try this in a Canvas’ Paint event: ```xojo g.DrawingColor = &cff0000 g.DrawRectangle( 0, 0, g.Width, g.Height ) var textToDraw as String = "This is a test string." var textWidth as Double = g.TextWidth( textToDraw ) var textX as Double = (g.Width - textWidth) / 2 var textY as Double = ((g.height - g.TextHeight) / 2) + g.FontAscent g.DrawText( textToDraw, textX, textY, textWidth ) ``` ![image](https://forum.xojo.com/uploads/default/original/2X/5/5f59045ae3a61a8b4862ff8efee827b6403198a9.png) ---
**Author:** ![Jean-Yves\_Pochez](https://forum.xojo.com/user_avatar/forum.xojo.com/jean-yves_pochez/32/21769_2.png) [@Jean-Yves\_Pochez](https://forum.xojo.com/u/Jean-Yves_Pochez)\ **Post date:** [August 13, 2021, 9:28am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/3 "2021-08-13T09:28:12Z")
and even more difficult if text is styled ! ---
**Author:** ![Emile\_Schwarz](https://forum.xojo.com/letter_avatar_proxy/v4/letter/e/90ced4/32.png) [@Emile\_Schwarz](https://forum.xojo.com/u/Emile_Schwarz)\ **Post date:** [August 13, 2021, 11:22am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/4 "2021-08-13T11:22:42Z")
Thank you Anthony, Jean-Yves. No style. ---
**Author:** ![MarkusR](https://forum.xojo.com/user_avatar/forum.xojo.com/markusr/32/685_2.png) [@MarkusR](https://forum.xojo.com/u/MarkusR)\ **Post date:** [August 13, 2021, 1:46pm UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/5 "2021-08-13T13:46:25Z")
the “new” TextShape is also good for alignment. ---
**Author:** ![Emile\_Schwarz](https://forum.xojo.com/letter_avatar_proxy/v4/letter/e/90ced4/32.png) [@Emile\_Schwarz](https://forum.xojo.com/u/Emile_Schwarz)\ **Post date:** [August 14, 2021, 11:44am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/6 "2021-08-14T11:44:28Z")
At last, I get some troubles with the shared example. I used it as is, and it worked fine, but I went ahead and add a way to increase the font size. Because I put the testing Canvas above an existing window, I changed the colors. Here’s my current code (MouseDown and Paint are Canvas1 Events, the gSize Property is in Window1): Function MouseDown(X As Integer, Y As Integer) As Boolean gSize = gSize + 16 Me.Invalidate Return True End Function Sub Paint(g As Graphics, areas() As REALbasic.Rect) // Fills the Canvas background g.ForeColor = &cffff00 g.DrawRect(0, 0, g.Width, g.Height) g.FillRect(0, 0, g.Width, g.Height) // Set a Default Size g.TextSize = gSize // Text Color g.ForeColor = &c000000 // Compute the draw location Dim textToDraw As String = “tout petit” // String with ascent and descent Dim textWidth As Double = g.StringWidth( textToDraw ) Dim textX As Double = (g.Width - textWidth) / 2 Dim textY As Double = ((g.height - g.StringHeight(textToDraw,g.Width)) / 2) + g.TextAscent // Draw the String g.DrawString(textToDraw, textX, textY, textWidth) End Sub gSize Property: gSize As Integer = 64 My conclusion: maybe my idea to make the print centered by code was a bad idea. Also, the String Draw Size depends on its length (a max size around 140 pixels can be defined for a long string). The base line change each time I enlarge the Font Size. Due to the bad idea to use “Top” as a test text, it tooks me time to realize some sizes will probably never be used; a meaningful string is far more than 3 characters (Using “Top” was a good idea because it holds a character with Ascent and another with Descent; it is also draw at the… top of the Canvas… a second one is drawn at its bottom…)… ---
**Author:** ![Anthony\_G\_Cyphers](https://forum.xojo.com/user_avatar/forum.xojo.com/anthony_g_cyphers/32/16862_2.png) [@Anthony\_G\_Cyphers](https://forum.xojo.com/u/Anthony_G_Cyphers)\ **Post date:** [August 14, 2021, 11:54am UTC](https://forum.xojo.com/t/canvas1-drawstring-vertically-centered/65020/7 "2021-08-14T11:54:14Z")
Change the textY calculation line to: ```xojo var textY as Double = ((g.height - g.TextHeight) / 2) + g.FontAscent - ((g.TextHeight - g.FontAscent) / 2) ``` ![image](https://forum.xojo.com/uploads/default/original/2X/6/6914cc65126973af246b37b592ec94ff9573c982.png) This actually gets you a better fit than using a TextShape’s VerticalAlignment set to Center. ```xojo var t as new TextShape t.FillColor = &cff0000 t.Value = "String." t.FontSize = FontSize t.VerticalAlignment = TextShape.Alignment.Center t.HorizontalAlignment = TextShape.Alignment.Center g.DrawObject( t, g.Width / 2, g.Height / 2 ) ``` ![image](https://forum.xojo.com/uploads/default/original/2X/3/312be527470f44a6a48a4f96bb490928045d4951.png)