# Draw text on Gtk canvas

**URL:** <https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462>\
**Category:** General Usage\
**Tags:** question\
**Created:** [February 11, 2020, 11:12am UTC](https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462 "2020-02-11T11:12:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [February 11, 2020, 11:12am UTC](https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462/1 "2020-02-11T11:12:39Z")

</div>

I am trying to draw letters of a specific size, color, opacity, and location in a Gtk window. Here is an example of what the output might look like: [example](https://www.neurobs.com/manager/content/docs/psychlab101_experiments/Visual%20Search%20(Shapes)/Visual%20Search%20-%20Demo.png).

I am able to draw rectangles with the following code:

```julia
function draw_object!(ex, vo)
    c = ex.canvas
    win = ex.window
    w = vo.width
    pos = vo.location
    @guarded draw(c) do widget
        ctx = getgc(c)
        rectangle(ctx, pos..., w, w)
        set_source_rgb(ctx, 252, 3, 3)
        fill(ctx)
    end
    Gtk.showall(c)
    return nothing
end

```

Even though I went through the documentation and source code, it is not clear how to draw text and modify its properties. Any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![lobingera](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lobingera/32/211_2.png) [@lobingera](https://discourse.julialang.org/u/lobingera)\
**Post date:** [February 11, 2020, 12:35pm UTC](https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462/2 "2020-02-11T12:35:37Z")

</div>

It’s somehow implict. A GtkCanvas is actually a libcairo surface and with the getgc you can get a Cairo context and use the calls provided by Cairo.jl ([Cairo.jl/Samples.md at master · JuliaGraphics/Cairo.jl · GitHub](https://github.com/JuliaGraphics/Cairo.jl/blob/master/samples/Samples.md)).  
Note: For single letter drawing (and if you can live with the standard font(s)) it’s recommended to stay with the ‘simple’ interface (-\> [Cairo.jl/sample\_text.jl at master · JuliaGraphics/Cairo.jl · GitHub](https://github.com/JuliaGraphics/Cairo.jl/blob/master/samples/sample_text.jl))

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [February 11, 2020, 2:00pm UTC](https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462/3 "2020-02-11T14:00:18Z")

</div>

Thank you. This was very helpful.

I am still struggling with a few details. First, how do I set the location of the text? The rectangle appears to be based on the top left corner. However, the text location is different. Second, is it possible to set the alphacolor with RBG values instead of colarant?

Here is what I have so far:

```julia
using Gtk, Graphics, Cairo, Colors
c = @GtkCanvas()
win = GtkWindow(c, "Canvas",500, 500)
@guarded draw(c) do widget
    ctx = getgc(c)
    h = height(c)
    w = width(c)
    # draw text 
    select_font_face(ctx, "Sans", Cairo.FONT_SLANT_NORMAL,
         Cairo.FONT_WEIGHT_NORMAL);
    set_font_size(ctx, 52.0);
    set_source_rgb(ctx, 0.8,0.8,0.8)
    extents = text_extents(cr, "cairo");
    println(extents[4])
    x = 128.0-(extents[3]/2 + extents[1]);
    y = 128.0-(extents[4]/2 + extents[2]);
    move_to(ctx, x, y);
    show_text(ctx, "cairo");
    #draw red semi-transluecent rectangle
    rectangle(ctx, x-50, y-50, 200, 100)
    set_source(ctx, Cairo.alphacolor(colorant"red",.5))
    fill(ctx)
    restore(ctx)

end
show(c)

```

Thank you!

---

<div class="post-metadata">

**Author:** ![lobingera](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lobingera/32/211_2.png) [@lobingera](https://discourse.julialang.org/u/lobingera)\
**Post date:** [February 11, 2020, 2:52pm UTC](https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462/4 "2020-02-11T14:52:34Z")

</div>

The simple\_text example paints a red dot at the position where the text is placed (10,135). The reference point is actually fontdependent, but you can assume a ‘lower, left corner’ of the textbox. And, yes, coordinates are x-\>right, y-\>down (if not rotated). Also in simple\_test you can see the use of set\_source\_rgba(context, RED, GREEN, BLUE, ALPHA).

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [February 11, 2020, 3:19pm UTC](https://discourse.julialang.org/t/draw-text-on-gtk-canvas/34462/5 "2020-02-11T15:19:36Z")

</div>

Thanks again for your help.

In case it is useful for future reference, here is a simple example of what I am trying to accomplish

```julia
using Gtk, Graphics, Cairo, Colors
c = @GtkCanvas()
win = GtkWindow(c, "Canvas",500, 500)
@guarded draw(c) do widget
    ctx = getgc(c)
    # draw text 
    select_font_face(ctx, "Sans", Cairo.FONT_SLANT_NORMAL,
         Cairo.FONT_WEIGHT_NORMAL);
    set_font_size(ctx, 22.5);
    set_source_rgb(ctx, 0.8,0.8,0.8)
    extents = text_extents(cr, "X");
    x = 128.0-(extents[3]/2 + extents[1]);
    y = 128.0-(extents[4]/2 + extents[2]);
    move_to(ctx, x, y);
    show_text(ctx, "X");
    #draw red semi-transluecent rectangle
    circle(ctx, x + 15/2, y - 15/2, 15)
    set_source_rgba(ctx, 1, 0, 0, .5)
    # set_source(ctx, Cairo.alphacolor(colorant"red",.5))
    fill(ctx)
    restore(ctx)
end
show(c)

```