It seems to me that there are actually a couple of misunderstandings in the drawme method:
ctx.scale(w,h);
Judging by what you do later, it seems like you think this means that you want to scale what you're doing so that you can draw stuff between 0,0 and 300,300. What you're actually doing is going in the other direction... if you keep this line here, you need to draw between 0,0 and 1,1.
ctx.rectangle(0,0,200,200);
ctx.fill();
Here you're asking for a rectangle from the origin to 200 * the width and height of your canvas. If you change it to ctx.rectangle (0, 0, 0.67, 0.67)
the result should be closer to what you wanted. Or, as I mentioned earlier, you could just get rid of the ctx.scale(w,h);
call.
ctx.paint();
Take a look at the documentation for cairo_paint: "A drawing operator that paints the current source everywhere within the current clip region." What you want is to fill the current path, which is what cairo_fill does. Since you haven't defined a clip region, the entire context gets filled.
Alternately, you could create a clip region with cairo_clip; just add a ctx.clip ();
right before ctx.paint ();
. You'll probably want to use cairo_save and cairo_restore--the documentation for cairo_clip explains it.