As simple as it sounds, drawing an arrow with an arrowhead, that can change colour and thickness of the lines can be challenging. The code is relatively easy, and it’s the mathematics that makes it complicated to look right. I created a method that makes it easy and is portable to use in your program. Code can be downloaded for Xojo 2019 r1.1 on GitHub at:

*Uses Xojo API1

Below is a screen grab when drawing one coloured arrow that starts at x:y coordinate (5,5) and the arrowtip is a coordinate (100,100). Thickness of the line is set to 2, and the colour is &c11CCDD. Below is a screen grab of the running program with a Canvas.

ArrowHead Screen Grab


Three lines make the arrow, with one line for the long middle portion of the arrow, and two small lines at the tip making the arrowtip. Calling the DrawArrow method is shown below from the Canvas Paint event.

Sub Paint(g As Graphics, areas() As REALbasic.Rect) Handles Paint
//Draw an arrow
//g is graphics, FromX and FromY are the starting coordinates of the arrow
//ToX and ToY are the arrow end points
//AThickness is the arrow thickness
//AColour is the arrow colour
DrawArrow(g,5, 5, 100, 100, 2, &c11CCDD)
End Sub


A graphics property is needed to have access to the drawing methods within Xojo.


This program was created in Xojo 2019 r1.1 on 17 September 2019