The Gnome Canvas

Hello Canvas!

The Gnome Canvas is the part of Gnome, that I was not able to find a really complete tutorial about, so this is really needed as the Canvas is a nice piece of software to code with.

In my experience it is far superior to the System.Windows.Forms way of Drawing.

So, here we go..

Hello Canvas, first try

Our first application will do nothing more than print a nice "Hello Canvas!" on the screen.

The Canvas can be created with a simple

Canvas canvas1 = new Canvas();
Next, we will define the Size of the Canvas. The value will be needed several times, so we create two variables...
int Width = 100;
int Height = 100;
... and use them.
canvas1.SetScrollRegion(0, 0, Width, Height);
canvas1.WidthRequest = Width;
canvas1.HeightRequest = Height;
Each Canvas needs a root...
CanvasGroup root = canvas1.Root();
Now we are ready. With the Canvas. But there is no text,yet.

So let me introduce the first CanvasItem: the CanvasText.

Each Item has several methods and properties, often X and Y coordinate, a FillColor, somtimes also an OutlineColor. The CanvasText also has the Text property.

CanvasText hello = new CanvasText(root);
hello.X = 0;
hello.Y = 0;
hello.FillColor = "#000000";
hello.Text = "Hello, Canvas!";
hello.Show();
So please have a look at your first canvas code:
using System;
using Gtk;
using GtkSharp;
using Gnome;

class CanvasTest {

        public CanvasTest() {


                Application.Init();

                Window window1 = new Window("Hello Canvas!");
                window1.DeleteEvent += new DeleteEventHandler (delete_event);
               Canvas canvas1 = new Canvas();

                int Width = 100;
                int Height = 100;

                canvas1.SetScrollRegion(0, 0, Width, Height);
                canvas1.WidthRequest = Width;
                canvas1.HeightRequest = Height;
                CanvasGroup root = canvas1.Root();

                // Here we go

                CanvasText hello = new CanvasText(root);
                hello.X = 0;
                hello.Y = 0;
                hello.FillColor = "#000000";
                hello.Text = "Hello, Canvas!";
                hello.Show();

                canvas1.Show();

                window1.Add(canvas1);
                window1.ShowAll();
                Application.Run();

        }

        public static void Main()
        {
                new CanvasTest();
        }

        void delete_event (object obj, DeleteEventArgs args)
        {
                Application.Quit ();
        }

}
We can compile this with:
mcs -r gtk-sharp.dll -r glib-sharp.dll -r gnome-sharp.dll hello.cs
Now run it and you will see...
.. something messy as show here :(

Hello, Canvas, second try

Ok, this was disappointing. But the fix is very easy.

It seams like the coordinates (X/Y) apply to the center of the text.

For now, we can simply change the coordinates:

hello.X = 40;
hello.Y = 10;
Change this a compile once again.

Hello Canvas, with Background

This was already very nice, but in most cases you will also require a background (e.g. white), to make the information more readable.

The bad news is, GnomeCanvas has no Background property.

Not that nice, but working is to make a white background, by drawing a white Rectangle. We create the CanvasRect object.

// Draw Background

CanvasRect background = new CanvasRect(root);
And then set the coordinates to (0/0) and the Width and Height of our Canvas. The FillColor is specified as Hex Color Code (you maybe know this from HTML).
background.X1 = 0;
background.X2 = Width;
background.Y1 = 0;
background.Y2 = Height;
background.FillColor = "#ffffff";
background.Show();
You probably want the complete example:
using System;
using Gtk;
using GtkSharp;
using Gnome;

class CanvasTest {

        public CanvasTest() {


                Application.Init();

                Window window1 = new Window("Hello Canvas!");
                window1.DeleteEvent += new DeleteEventHandler (delete_event);
               Canvas canvas1 = new Canvas();

                int Width = 100;
                int Height = 100;

                canvas1.SetScrollRegion(0, 0, Width, Height);
                canvas1.WidthRequest = Width;
                canvas1.HeightRequest = Height;
                CanvasGroup root = canvas1.Root();

                // Draw Background

                CanvasRect background = new CanvasRect(root);
                background.X1 = 0;
                background.X2 = Width;
                background.Y1 = 0;
                background.Y2 = Height;
                background.FillColor = "#ffffff";
                background.Show();

                // Here we go

                CanvasText hello = new CanvasText(root);
                hello.X = 40;
                hello.Y = 10;
                hello.FillColor = "#000000";
                hello.Text = "Hello, Canvas!";
                hello.Show();

                canvas1.Show();

                window1.Add(canvas1);
                window1.ShowAll();
                Application.Run();

        }

        public static void Main()
        {
                new CanvasTest();
        }

        void delete_event (object obj, DeleteEventArgs args)
        {
                Application.Quit ();
        }

}

Hello Canvas, antialiased

OK, this looks pretty nice, but it could be even nicer if it would be anti-aliased. I strongly encourage you to enable antialiasing whenever possible, otherwise some Items simply look awful.

You might have discovered or guessed the Aa property. Sadly this is read-only. You will have to create the Canvas differently. Instead of

Canvas  canvas1 = new Canvas();
you use:
Canvas canvas1 = Canvas.NewAa();

Hello Canvas, final

Here is the final code and a nice screenshot:

using System;
using Gtk;
using GtkSharp;
using Gnome;

class CanvasTest {

        public CanvasTest() {


                Application.Init();

                Window window1 = new Window("Hello Canvas!");
                window1.DeleteEvent += new DeleteEventHandler (delete_event);
               Canvas canvas1 = Canvas.NewAa();

                int Width = 100;
                int Height = 100;

                canvas1.SetScrollRegion(0, 0, Width, Height);
                canvas1.WidthRequest = Width;
                canvas1.HeightRequest = Height;
                CanvasGroup root = canvas1.Root();

                // Draw Background

                CanvasRect background = new CanvasRect(root);
                background.X1 = 0;
                background.X2 = Width;
                background.Y1 = 0;
                background.Y2 = Height;
                background.FillColor = "#ffffff";
                background.Show();

                // Here we go

                CanvasText hello = new CanvasText(root);
                hello.X = 40;
                hello.Y = 10;
                hello.FillColor = "#000000";
                hello.Text = "Hello, Canvas!";
                hello.Show();

                canvas1.Show();

                window1.Add(canvas1);
                window1.ShowAll();
                Application.Run();

        }

        public static void Main()
        {
                new CanvasTest();
        }

        void delete_event (object obj, DeleteEventArgs args)
        {
                Application.Quit ();
        }

}
That's it. In the next chapters I will introduce all available Items and then create some example applications.

Credits

Author: Johannes Roith (johannes at jroith.de)