Drawing with cairo in seed-3.2 javascript with gtk3

Question

I have tried to find out how to make a simple cairo drawing in seed-3.2. I know that gtk3 has change the event method from expose-event to draw.
The callback works fine in my small test sample but I don't know to get hold of the cairo object.
I can see that the callback function arguments are:
[object GtkDrawingArea]
[object seed_struct]

I don't know if the seed_stuct is the cairo handler and to access it.

Note. The cairo.js in seed-example is gtk+2.0.

Code sample.

#!/usr/bin/env seed

cairo = imports.cairo;
Gtk = imports.gi.Gtk;
Gdk = imports.gi.Gdk;

const WINDOW_WIDTH=300;
const WINDOW_HEIGHT=300;

function MIN(x,y) {
    if (x<y) return x;
    return y;
}

function draw_cb(drea, cr, data){
//    var cr = new cairo.Context.from_drawable(drawing_area.window);
    Seed.print(drea);
    Seed.print(cr);
    Seed.print(data);

    var width=drea.get_allocated_width();
    var height=drea.get_allocated_height();
    Seed.print("width="+width+" height="+height);
 //   var cr = Gdk.cairo_create(drea.window);
 //   Seed.print(cr);
    var context=drea.get_style_context();
    Seed.print(context);
    var PAD=50;
    var extent=MIN(width-2*PAD, height-2*PAD);
    var x=PAD;
    var y=PAD;
// From here I don't know what to do

//    Seed.printf(Seed.stringify(context));

//    context.render_arrow(cr, Math.PI/2.0,x,y,extent);
//    cr.arc( width/2.0, height/2.0,
//      MIN(width,height)/2.0, 
//      0, 2.0*Math.PI );
   /* Set color for background */
    cr.storke();
    cairo.set_line_width(cr, 2);
    cairo.set_source_rgb(cr, 1, 1, 1);
//    cr.operator=cairo.Operator.CLEAR;
    /* fill in the background color*/
//    Seed.print("Before paint");
 //   cr.paint();
 //   Seed.print("After paint");
 //   cr.operator=cairo.Operator.OVER;

   /* set color for rectangle */
//   cr.set_source_rgb(0.42, 0.65, 0.80);
   /* set the line width */
//   cr.set_line_width(6);
   /* draw the rectangle's path beginning at 3,3 */
 //  cr.rectangle (3, 3, 100, 100);
   /* stroke the rectangle's path with the chosen color so it's actually visible */
 //  cr.stroke();

   /* draw circle */
/*
   cr.set_source_rgb(0.17, 0.63, 0.12);
   cr.set_line_width(cr,2);
   cr.arc(150, 210, 20, 0, 2*G_PI);
   cr.stroke();
*/
   /* draw horizontal line */
/*
   cr.set_source_rgb(0.77, 0.16, 0.13);
   cr.set_line_width(6);
   cr.move_to(80,160);
   cr.line_to(200, 160);
   cr.stroke();
*/
   /* free cr and all associated resources */
/*
   cr.destroy(cr);
*/
   return false;
}

Gtk.init(Seed.argv);

var w = new Gtk.Window();
w.signal["destroy"].connect(Gtk.main_quit);
var da = new Gtk.DrawingArea();
da.set_size_request(WINDOW_WIDTH, WINDOW_HEIGHT);
da.signal["draw"].connect(draw_cb);
w.add(da);
//da.show();
//w.show();

w.show_all();
Gtk.main();

Answer 1

I have poked a little around.
You can get a cairo contex for the window widget by using the the function:

var cr = new cairo.Context.from_window(drea.get_window());

I don't know if this is the correct way in gtk3 but it works.

I don't know what the second parameter (in the callback function draw_cb) is used for. I think is should be the cairo context according to equivalent function in C.

But anyway this code sample seems to work

#!/usr/bin/env seed
/* Simple cairo example using gtk3 */

cairo = imports.cairo;
Gtk = imports.gi.Gtk;
Gdk = imports.gi.Gdk;

const WINDOW_WIDTH=300;
const WINDOW_HEIGHT=300;

function MIN(x,y) {
    if (x<y) return x;
    return y;
}

function draw_cb(drea, crx, data){
    var cr = new cairo.Context.from_window(drea.get_window());
    Seed.print("drea="+drea);
    Seed.print("cr="+cr);
    Seed.print("data="+data);
    for(prop in cr) {
    Seed.print("cr.prop="+prop);
    }
    /* Get the size of the window */
    var width=drea.get_allocated_width();
    var height=drea.get_allocated_height();
    Seed.print("width="+width+" height="+height);

    var context=drea.get_style_context();
    Seed.print(context);
    var PAD=50;
    var extent=MIN(width-2*PAD, height-2*PAD);
    var x=PAD;
    var y=PAD;
    // Cairo drawing from here
    cr.set_source_rgba(0.88, 0.20, 0.40, 0.6);
    cr.arc( width/2.0, height/2.0,
        MIN(width,height)/2.0, 
        0, 2.0*Math.PI );
    cr.stroke();
   /* set color for rectangle */
    cr.set_source_rgba(0.42, 0.65, 0.80, 1.0);
    cr.rectangle (width*0.1, height*0.1, width*0.8, height*0.8);
    cr.stroke();
   /* draw line */
    cr.set_source_rgba(0.00, 0.88, 0.13,0.6);
    //  cr.set_line_width(6);
    cr.move_to(width*0.9,height*0.1);
    cr.line_to(width*0.1,height*0.9);
    cr.stroke();
   /* free cr and all associated resources */
    cr.destroy();
   return false;
}

Gtk.init(Seed.argv);

var w = new Gtk.Window();
w.signal["destroy"].connect(Gtk.main_quit);
var da = new Gtk.DrawingArea();
da.set_size_request(WINDOW_WIDTH, WINDOW_HEIGHT);
da.signal["draw"].connect(draw_cb);
w.add(da);

//da.show();
//w.show();

w.show_all();
Gtk.main();

Note. You can see that the window is redrawn when you resizes the window.