Compile canvas command buffer into wasm and bind host surface/render API

build.sh

@@ -53,7 +53,7 @@ elif [ $target = orca ] ; then
 
 	python3 ./scripts/bindgen2.py canvas \
 		src/canvas_api.json \
-		--guest-stubs sdk/graphics.c \
+		--guest-stubs sdk/orca_surface.c \
 		--guest-include graphics.h \
 		--wasm3-bindings ./src/canvas_api_bind_gen.c
 

milepost

@@ -1 +1 @@
-Subproject commit 7c273f494bd3a4141ff9a085d888616f959c7938
+Subproject commit b27dc615d1465abd33ba6678aa8980c16b08f40b

samples/pong/build.sh

@@ -8,8 +8,8 @@ wasmFlags="--target=wasm32 \
        -Wl,--allow-undefined \
        -g \
        -D__ORCA__ \
-       -I ../../sdk -I ../../milepost -I ../../milepost/src -I ../../milepost/src/util -I ../../milepost/src/platform -I../.."
+       -I ../../sdk -I../../milepost/ext -I ../../milepost -I ../../milepost/src -I ../../milepost/src/util -I ../../milepost/src/platform -I../.."
 
-/usr/local/opt/llvm/bin/clang $wasmFlags -o ./module.wasm ../../sdk/graphics.c ../../sdk/orca.c src/main.c
+/usr/local/opt/llvm/bin/clang $wasmFlags -o ./module.wasm ../../sdk/orca.c src/main.c
 
 python3 ../../scripts/mkapp.py --orca-dir ../.. --name Pong --icon icon.png module.wasm

samples/pong/src/main.c

@@ -17,47 +17,41 @@
 extern float cosf(float x);
 extern float sinf(float x);
 
-const g_color paddleColor = {1, 0, 0, 1};
+const mg_color paddleColor = {1, 0, 0, 1};
 mp_rect paddle = {200, 40, 200, 40};
 
-const g_color ballColor = {1, 1, 0, 1};
+const mg_color ballColor = {1, 1, 0, 1};
 mp_rect ball = {200, 200, 60, 60};
 
 vec2 velocity = {10, 10};
 
 vec2 frameSize = {100, 100};
-float rotationDir = 1;
 
 bool leftDown = false;
 bool rightDown = false;
 
-g_font font;
+mg_canvas canvas;
+mg_surface surface;
 
-mem_arena arena;
+mg_surface mg_surface_main(void);
 
 void OnInit(void)
 {
-	mem_arena_init(&arena);
+	//TODO create surface for main window
-	font = g_font_create_default();
+	surface = mg_surface_main();
+	canvas = mg_canvas_create();
 }
 
 void OnFrameResize(u32 width, u32 height)
 {
 	log_info("frame resize %u, %u", width, height);
-
 	frameSize.x = width;
 	frameSize.y = height;
-/*
-	paddle.x = width/2. - paddle.w/2.;
-	ball.x = width/2. - ball.w/2.;
-	ball.y = height/2. - ball.h/2.;
-*/
 }
 
 void OnMouseDown(int button)
 {
 	log_info("mouse down!");
-	rotationDir *= -1;
 }
 
 void OnKeyDown(int key)
@@ -104,8 +98,6 @@ void OnKeyUp(int key)
 
 void OnFrameRefresh(void)
 {
-	char* tmp = mem_arena_alloc(&arena, 512);
-
 	f32 aspect = frameSize.x/frameSize.y;
 
     if(leftDown)
@@ -153,32 +145,25 @@ void OnFrameRefresh(void)
 		ball.y = frameSize.y/2. - ball.h;
 	}
 
-	g_set_color_rgba(0, 1, 1, 1);
+	mg_canvas_set_current(canvas);
-	g_clear();
 
-	g_mat2x3 transform = {1, 0, 0,
+	mg_set_color_rgba(0, 1, 1, 1);
+	mg_clear();
+
+	mg_mat2x3 transform = {1, 0, 0,
 	                       0, -1, frameSize.y};
 
-	g_matrix_push(transform);
+	mg_matrix_push(transform);
 
-	g_set_color(paddleColor);
+	mg_set_color(paddleColor);
-	g_rectangle_fill(paddle.x, paddle.y, paddle.w, paddle.h);
+	mg_rectangle_fill(paddle.x, paddle.y, paddle.w, paddle.h);
 
-	g_set_color(ballColor);
+	mg_set_color(ballColor);
-	g_circle_fill(ball.x+ball.w/2, ball.y + ball.w/2, ball.w/2.);
+	mg_circle_fill(ball.x+ball.w/2, ball.y + ball.w/2, ball.w/2.);
 
+    mg_matrix_pop();
 
-	g_set_font(font);
+    mg_surface_prepare(surface);
-	g_set_font_size(16);
+    mg_render(surface, canvas);
-	g_set_color_rgba(0, 0, 0, 1);
+    mg_surface_present(surface);
-	g_set_text_flip(true);
-
-	str8 str = {.len = 13, .ptr = (char*)"Hello, world!"};
-	g_move_to(10, 10);
-	g_text_outlines(str);
-	g_fill();
-
-    g_matrix_pop();
-
-    mem_arena_clear(&arena);
 }

scripts/bindgen.py

@@ -53,7 +53,7 @@ def gen_stub(name, sig, native_name):
 				retString = '*((i64*)&_sp[0]) = '
 			elif c == 'f':
 				retString = '*((f32*)&_sp[0]) = '
-			elif c == 'd':
+			elif c == 'F':
 				retString = '*((f64*)&_sp[0]) = '
 			elif c == 'p':
 				print('returning pointers is not supported yet\n')
@@ -74,7 +74,7 @@ def gen_stub(name, sig, native_name):
 				argString += '*(i64*)&_sp[' + str(argIndex) + ']'
 			elif c == 'f':
 				argString += '*(f32*)&_sp[' + str(argIndex) + ']'
-			elif c == 'd':
+			elif c == 'F':
 				argString += '*(f64*)&_sp[' + str(argIndex) + ']'
 			elif c == 'p':
 				argString += '(void*)((char*)_mem + *(i32*)&_sp[' + str(argIndex) + '])'

sdk/graphics.c

@@ -1,45 +0,0 @@
-#include"graphics.h"
-
-
-void g_set_color_argptr_stub(g_color* color);
-
-void g_set_color(g_color color)
-{
-	g_set_color_argptr_stub(&color);
-}
-
-
-void g_matrix_push_argptr_stub(g_mat2x3* m);
-
-void g_matrix_push(g_mat2x3 m)
-{
-	g_matrix_push_argptr_stub(&m);
-}
-
-
-void g_font_create_default_argptr_stub(g_font* __retArg);
-
-g_font g_font_create_default()
-{
-	g_font __ret;
-	g_font_create_default_argptr_stub(&__ret);
-	return(__ret);
-}
-
-
-void g_set_font_argptr_stub(g_font* font);
-
-void g_set_font(g_font font)
-{
-	g_set_font_argptr_stub(&font);
-}
-
-
-void g_text_outlines_argptr_stub(str8* text);
-
-void g_text_outlines(str8 text)
-{
-	g_text_outlines_argptr_stub(&text);
-}
-
-

sdk/graphics.h

@@ -1,218 +0,0 @@
-//*****************************************************************
-//
-//	$file: graphics.h $
-//	$author: Martin Fouilleul $
-//	$date: 23/36/2015 $
-//	$revision: $
-//
-//*****************************************************************
-#ifndef __GRAPHICS_H_
-#define __GRAPHICS_H_
-
-#include"typedefs.h"
-#include"strings.h"
-
-typedef struct g_mat2x3
-{
-	f32 m[6];
-} g_mat2x3;
-
-typedef struct g_color
-{
-	union
-	{
-		struct
-		{
-			f32 r;
-			f32 g;
-			f32 b;
-			f32 a;
-		};
-		f32 c[4];
-	};
-} g_color;
-
-typedef enum {G_JOINT_MITER = 0,
-              G_JOINT_BEVEL,
-	          G_JOINT_NONE } g_joint_type;
-
-typedef enum {G_CAP_NONE = 0,
-              G_CAP_SQUARE } g_cap_type;
-
-typedef struct g_font { u64 h; } g_font;
-
-typedef struct g_font_extents
-{
-	f32 ascent;    // the extent above the baseline (by convention a positive value extends above the baseline)
-	f32 descent;   // the extent below the baseline (by convention, positive value extends below the baseline)
-	f32 leading;   // spacing between one row's descent and the next row's ascent
-	f32 xHeight;   // height of the lower case letter 'x'
-	f32 capHeight; // height of the upper case letter 'M'
-	f32 width;     // maximum width of the font
-
-} g_font_extents;
-
-typedef struct g_text_extents
-{
-	f32 xBearing;
-	f32 yBearing;
-	f32 width;
-	f32 height;
-	f32 xAdvance;
-	f32 yAdvance;
-
-} g_text_extents;
-
-//------------------------------------------------------------------------------------------
-//NOTE(martin): fonts
-//------------------------------------------------------------------------------------------
-
-g_font g_font_nil();
-g_font g_font_create_default();
-//g_font g_font_create_from_memory(u32 size, byte* buffer, u32 rangeCount, unicode_range* ranges);
-void g_font_destroy(g_font font);
-
-//NOTE(martin): the following int valued functions return -1 if font is invalid or codepoint is not present in font//
-//TODO(martin): add enum error codes
-/*
-g_font_extents g_font_get_extents(g_font font);
-g_font_extents g_font_get_scaled_extents(g_font font, f32 emSize);
-f32 g_font_get_scale_for_em_pixels(g_font font, f32 emSize);
-
-//NOTE(martin): if you need to process more than one codepoint, first convert your codepoints to glyph indices, then use the
-//              glyph index versions of the functions, which can take an array of glyph indices.
-
-str32 g_font_get_glyph_indices(g_font font, str32 codePoints, str32 backing);
-str32 g_font_push_glyph_indices(g_font font, mem_arena* arena, str32 codePoints);
-u32 g_font_get_glyph_index(g_font font, utf32 codePoint);
-
-int g_font_get_codepoint_extents(g_font font, utf32 codePoint, g_text_extents* outExtents);
-
-int g_font_get_glyph_extents(g_font font, str32 glyphIndices, g_text_extents* outExtents);
-
-mp_rect g_text_bounding_box_utf32(g_font font, f32 fontSize, str32 text);
-mp_rect g_text_bounding_box(g_font font, f32 fontSize, str8 text);
-*/
-//------------------------------------------------------------------------------------------
-//NOTE(martin): images
-//------------------------------------------------------------------------------------------
-/*
-g_image g_image_nil();
-bool g_image_is_nil(g_image a);
-
-g_image g_image_create(u32 width, u32 height);
-g_image g_image_create_from_rgba8(u32 width, u32 height, u8* pixels);
-g_image g_image_create_from_data(str8 data, bool flip);
-g_image g_image_create_from_file(str8 path, bool flip);
-
-void g_image_destroy(g_image image);
-
-void g_image_upload_region_rgba8(g_image image, mp_rect region, u8* pixels);
-vec2 g_image_size(g_image image);
-*/
-//------------------------------------------------------------------------------------------
-//NOTE(martin): atlasing
-//------------------------------------------------------------------------------------------
-/*
-//NOTE: rectangle allocator
-typedef struct g_rect_atlas g_rect_atlas;
-
-g_rect_atlas* g_rect_atlas_create(mem_arena* arena, i32 width, i32 height);
-mp_rect g_rect_atlas_alloc(g_rect_atlas* atlas, i32 width, i32 height);
-void g_rect_atlas_recycle(g_rect_atlas* atlas, mp_rect rect);
-
-//NOTE: image atlas helpers
-typedef struct g_image_region
-{
-	g_image image;
-	mp_rect rect;
-} g_image_region;
-
-g_image_region g_image_atlas_alloc_from_rgba8(g_rect_atlas* atlas, g_image backingImage, u32 width, u32 height, u8* pixels);
-g_image_region g_image_atlas_alloc_from_data(g_rect_atlas* atlas, g_image backingImage, str8 data, bool flip);
-g_image_region g_image_atlas_alloc_from_file(g_rect_atlas* atlas, g_image backingImage, str8 path, bool flip);
-void g_image_atlas_recycle(g_rect_atlas* atlas, g_image_region imageRgn);
-*/
-//------------------------------------------------------------------------------------------
-//NOTE(martin): transform, viewport and clipping
-//------------------------------------------------------------------------------------------
-void g_viewport(mp_rect viewPort);
-
-void g_matrix_push(g_mat2x3 matrix);
-void g_matrix_pop();
-
-void g_clip_push(f32 x, f32 y, f32 w, f32 h);
-void g_clip_pop();
-
-//------------------------------------------------------------------------------------------
-//NOTE(martin): graphics attributes setting/getting
-//------------------------------------------------------------------------------------------
-void g_set_color(g_color color);
-void g_set_color_rgba(f32 r, f32 g, f32 b, f32 a);
-void g_set_width(f32 width);
-void g_set_tolerance(f32 tolerance);
-void g_set_joint(g_joint_type joint);
-void g_set_max_joint_excursion(f32 maxJointExcursion);
-void g_set_cap(g_cap_type cap);
-void g_set_font(g_font font);
-void g_set_font_size(f32 size);
-void g_set_text_flip(bool flip);
-
-/*
-void g_set_image(g_image image);
-void g_set_image_source_region(mp_rect region);
-*/
-
-g_color g_get_color();
-f32 g_get_width();
-f32 g_get_tolerance();
-g_joint_type g_get_joint();
-f32 g_get_max_joint_excursion();
-g_cap_type g_get_cap();
-g_font g_get_font();
-f32 g_get_font_size();
-bool g_get_text_flip();
-
-//------------------------------------------------------------------------------------------
-//NOTE(martin): path construction
-//------------------------------------------------------------------------------------------
-vec2 g_get_position();
-void g_move_to(f32 x, f32 y);
-void g_line_to(f32 x, f32 y);
-void g_quadratic_to(f32 x1, f32 y1, f32 x2, f32 y2);
-void g_cubic_to(f32 x1, f32 y1, f32 x2, f32 y2, f32 x3, f32 y3);
-void g_close_path();
-
-/*
-mp_rect g_glyph_outlines(str32 glyphIndices);
-void g_codepoints_outlines(str32 string);
-*/
-
-void g_text_outlines(str8 string);
-
-//------------------------------------------------------------------------------------------
-//NOTE(martin): clear/fill/stroke
-//------------------------------------------------------------------------------------------
-void g_clear();
-void g_fill();
-void g_stroke();
-
-//------------------------------------------------------------------------------------------
-//NOTE(martin): simple shapes helpers
-//------------------------------------------------------------------------------------------
-void g_rectangle_fill(f32 x, f32 y, f32 w, f32 h);
-void g_rectangle_stroke(f32 x, f32 y, f32 w, f32 h);
-void g_rounded_rectangle_fill(f32 x, f32 y, f32 w, f32 h, f32 r);
-void g_rounded_rectangle_stroke(f32 x, f32 y, f32 w, f32 h, f32 r);
-void g_ellipse_fill(f32 x, f32 y, f32 rx, f32 ry);
-void g_ellipse_stroke(f32 x, f32 y, f32 rx, f32 ry);
-void g_circle_fill(f32 x, f32 y, f32 r);
-void g_circle_stroke(f32 x, f32 y, f32 r);
-void g_arc(f32 x, f32 y, f32 r, f32 arcAngle, f32 startAngle);
-
-//NOTE: image helpers
-/*
-void g_image_draw(g_image image, mp_rect rect);
-void g_image_draw_region(g_image image, mp_rect srcRegion, mp_rect dstRegion);
-*/
-#endif //__GRAPHICS_H_

sdk/orca.c

@@ -13,3 +13,6 @@
 #include"util/memory.c"
 #include"util/strings.c"
 #include"util/utf8.c"
+
+#include"graphics_common.c"
+#include"orca_surface.c"

src/bindgen_core_api.txt

@@ -1,7 +1,12 @@
-orca_log v(iipipiip)
 cosf f(f)
 sinf f(f)
 floorf f(f)
 sqrtf f(f)
+cos F(F)
+sin F(F)
+sqrt F(F)
+fabs F(F)
+
+orca_log v(iipipiip)
 orca_mem_grow i(I)
 orca_assert i(ppipp)

src/canvas_api.json

@@ -1,124 +1,78 @@
 [
 {
-	"name": "g_clear",
+	"name": "mg_image_size",
-	"cname": "mg_clear",
+	"cname": "mg_image_size",
+	"ret": {"name": "vec2", "tag": "S"},
+	"args": [ {"name": "image",
+	           "type": {"name": "mg_image", "tag": "S"}}]
+},
+{
+	"name": "mg_image_create",
+	"cname": "mg_image_create",
+	"ret": {"name": "mg_image", "tag": "S"},
+	"args": [ {"name": "surface",
+	           "type": {"name": "mg_surface", "tag": "S"}},
+	          {"name": "width",
+	           "type": {"name": "u32", "tag": "i"}},
+	          {"name": "height",
+	           "type": {"name": "u32", "tag": "i"}}]
+},
+{
+	"name": "mg_image_destroy",
+	"cname": "mg_image_destroy",
 	"ret": {"name": "void", "tag": "v"},
+	"args": [ {"name": "image",
+	           "type": {"name": "mg_image", "tag": "S"}}]
+},
+{
+	"name": "mg_image_upload_region_rgba8",
+	"cname": "mg_image_upload_region_rgba8",
+	"ret": {"name": "void", "tag": "v"},
+	"args": [
+		{"name": "image",
+		 "type": {"name": "mg_image", "tag": "S"}},
+		{"name": "region",
+		 "type": {"name": "mp_rect", "tag": "S"}},
+		{"name": "pixels",
+		 "type": {"name": "u8*", "tag": "p"}}]
+},
+{
+	"name": "mg_surface_main",
+	"cname": "orca_surface_main",
+	"ret": {"name": "mg_surface", "tag": "S"},
 	"args": []
 },
 {
-	"name": "g_set_color_rgba",
+	"name": "mg_surface_prepare",
-	"cname": "mg_set_color_rgba",
+	"cname": "mg_surface_prepare",
 	"ret": {"name": "void", "tag": "v"},
 	"args": [
-		{"name": "r",
+		{"name": "surface",
-		 "type": {"name": "float", "tag": "f"}},
+		 "type": {"name": "mg_surface", "tag": "S"}}]
-		{"name": "g",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "b",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "a",
-		 "type": {"name": "float", "tag": "f"}}]
 },
 {
-	"name": "g_set_color",
+	"name": "mg_surface_present",
-	"cname": "mg_set_color",
+	"cname": "mg_surface_present",
 	"ret": {"name": "void", "tag": "v"},
 	"args": [
-		{"name": "color",
+		{"name": "surface",
-		 "type": {"name": "g_color", "cname": "mg_color", "tag": "S"}}]
+		 "type": {"name": "mg_surface", "tag": "S"}}]
 },
 {
-	"name": "g_matrix_push",
+	"name": "mg_surface_render_commands",
-	"cname": "mg_matrix_push",
+	"cname": "orca_surface_render_commands",
 	"ret": {"name": "void", "tag": "v"},
 	"args": [
-		{"name": "m",
+		{"name": "surface",
-		 "type": {"name": "g_mat2x3", "cname": "mg_mat2x3", "tag": "S"}}]
+		 "type": {"name": "mg_surface", "tag": "S"}},
-},
+		{"name": "clearColor",
-{
+		 "type": {"name": "mg_color", "tag": "S"}},
-	"name": "g_matrix_pop",
+		{"name": "primitiveCount",
-	"cname": "mg_matrix_pop",
+		 "type": {"name": "u32", "tag": "i"}},
-	"ret": {"name": "void", "tag": "v"},
+		{"name": "primitives",
-	"args": []
+		 "type": {"name": "mg_primitive*", "tag": "p"}},
-},
+		{"name": "eltCount",
-{
+		 "type": {"name": "u32", "tag": "i"}},
-	"name": "g_circle_fill",
+		{"name": "elements",
-	"cname": "mg_circle_fill",
+		 "type": {"name": "mg_path_elt*", "tag": "p"}}]
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "x",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "y",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "r",
-		 "type": {"name": "float", "tag": "f"}}]
-},
-{
-	"name": "g_rectangle_fill",
-	"cname": "mg_rectangle_fill",
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "x",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "y",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "w",
-		 "type": {"name": "float", "tag": "f"}},
-		{"name": "h",
-		 "type": {"name": "float", "tag": "f"}}]
-},
-{
-	"name": "g_font_create_default",
-	"cname": "mg_font_create_default",
-	"ret": {"name": "g_font", "cname": "mg_font", "tag": "S"},
-	"args": []
-},
-{
-	"name": "g_set_font",
-	"cname": "mg_set_font",
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "font",
-		 "type": {"name": "g_font", "cname": "mg_font" , "tag": "S"}}]
-},
-{
-	"name": "g_set_font_size",
-	"cname": "mg_set_font_size",
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "size",
-		 "type": {"name": "float", "cname": "float" , "tag": "f"}}]
-},
-{
-	"gen_stub": false,
-	"name": "g_text_outlines",
-	"cname": "mg_text_outlines",
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "text",
-		 "type": {"name": "str8", "cname": "str8" , "tag": "S"}}]
-},
-{
-	"name": "g_fill",
-	"cname": "mg_fill",
-	"ret": {"name": "void", "tag": "v"},
-	"args": []
-},
-{
-	"name": "g_move_to",
-	"cname": "mg_move_to",
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "x",
-		 "type": {"name": "f32", "tag":"f"}},
-		{"name": "y",
-		 "type": {"name": "f32", "tag":"f"}}]
-},
-{
-	"name": "g_set_text_flip",
-	"cname": "mg_set_text_flip",
-	"ret": {"name": "void", "tag": "v"},
-	"args": [
-		{"name": "flip",
-		 "type": {"name": "bool", "tag":"i"}}]
 }]

src/main.c

@@ -12,6 +12,7 @@
 
 #define MG_INCLUDE_GL_API
 #include"milepost.h"
+#include"graphics_common.h"
 
 #include"orca_runtime.h"
 
@@ -214,6 +215,36 @@ void orca_log(log_level level,
 	         msg);
 }
 
+mg_surface orca_surface_main(void)
+{
+	return(__orcaApp.surface);
+}
+
+void orca_surface_render_commands(mg_surface surface,
+                                  mg_color clearColor,
+                                  u32 primitiveCount,
+                                  mg_primitive* primitives,
+                                  u32 eltCount,
+                                  mg_path_elt* elements)
+{
+	orca_app* app = &__orcaApp;
+
+	char* memBase = app->runtime.wasmMemory.ptr;
+	u32 memSize = app->runtime.wasmMemory.committed;
+	if( ((char*)primitives > memBase)
+	  &&((char*)primitives + primitiveCount*sizeof(mg_primitive) - memBase <= memSize)
+	  &&((char*)elements > memBase)
+	  &&((char*)elements + eltCount*sizeof(mg_path_elt) - memBase <= memSize))
+	{
+		mg_surface_render_commands(surface,
+		                           clearColor,
+		                           primitiveCount,
+		                           primitives,
+		                           eltCount,
+		                           elements);
+	}
+}
+
 void debug_overlay_toggle(orca_debug_overlay* overlay)
 {
 	overlay->show = !overlay->show;
@@ -581,15 +612,11 @@ void* orca_runloop(void* user)
 			}
 		}
 
-		mg_canvas_prepare(app->canvas);
-
 		if(eventHandlers[G_EVENT_FRAME_REFRESH])
 		{
 			m3_Call(eventHandlers[G_EVENT_FRAME_REFRESH], 0, 0);
 		}
 
-		mg_present();
-
 		if(app->debugOverlay.show)
 		{
 			ui_style debugUIDefaultStyle = {.bgColor = {0},
@@ -606,7 +633,10 @@ void* orca_runloop(void* user)
 			                                 | UI_STYLE_FONT
 			                                 | UI_STYLE_FONT_SIZE;
 
-			ui_frame(&debugUIDefaultStyle, debugUIDefaultMask)
+			mp_rect frameRect = mg_surface_get_frame(app->debugOverlay.surface);
+			vec2 frameSize = {frameRect.w, frameRect.h};
+
+			ui_frame(frameSize, &debugUIDefaultStyle, debugUIDefaultMask)
 			{
 				ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
 				                          .size.height = {UI_SIZE_PARENT, 1, 1}},
@@ -717,8 +747,8 @@ void* orca_runloop(void* user)
 				}
 			}
 
-			mg_canvas_prepare(app->debugOverlay.canvas);
+			mg_surface_prepare(app->debugOverlay.surface);
-
+			mg_canvas_set_current(app->debugOverlay.canvas);
 				ui_draw();
 			/*
 				mg_set_font(app->debugOverlay.font);
@@ -728,7 +758,8 @@ void* orca_runloop(void* user)
 				mg_text_outlines(STR8("Debug Overlay"));
 				mg_fill();
 			*/
-			mg_present();
+			mg_render(app->debugOverlay.surface, app->debugOverlay.canvas);
+			mg_surface_present(app->debugOverlay.surface);
 		}
 		mem_scratch_clear();
 	}
@@ -747,14 +778,14 @@ int main(int argc, char** argv)
 
 	mp_rect windowRect = {.x = 100, .y = 100, .w = 810, .h = 610};
 	orca->window = mp_window_create(windowRect, "orca", 0);
-	orca->surface = mg_surface_create_for_window(orca->window, MG_BACKEND_DEFAULT);
+	orca->surface = mg_surface_create_for_window(orca->window, MG_CANVAS);
-	orca->canvas = mg_canvas_create(orca->surface);
+	orca->canvas = mg_canvas_create();
 
 	mg_surface_swap_interval(orca->surface, 1);
 
 	orca->debugOverlay.show = false;
-	orca->debugOverlay.surface = mg_surface_create_for_window(orca->window, MG_BACKEND_DEFAULT);
+	orca->debugOverlay.surface = mg_surface_create_for_window(orca->window, MG_CANVAS);
-	orca->debugOverlay.canvas = mg_canvas_create(orca->debugOverlay.surface);
+	orca->debugOverlay.canvas = mg_canvas_create();
 	orca->debugOverlay.fontReg = orca_font_create("../resources/Menlo.ttf");
 	orca->debugOverlay.fontBold = orca_font_create("../resources/Menlo Bold.ttf");
 	orca->debugOverlay.maxEntries = 200;
@@ -766,10 +797,15 @@ int main(int argc, char** argv)
 	//      the surfaces... This should probably be fixed in the implementation of mtl_surface!
 	for(int i=0; i<4; i++)
 	{
-		mg_canvas_prepare(orca->canvas);
+		mg_surface_prepare(orca->surface);
-		mg_present();
+		mg_canvas_set_current(orca->canvas);
-		mg_canvas_prepare(orca->debugOverlay.canvas);
+		mg_render(orca->surface, orca->canvas);
-		mg_present();
+		mg_surface_present(orca->surface);
+
+		mg_surface_prepare(orca->debugOverlay.surface);
+		mg_canvas_set_current(orca->debugOverlay.canvas);
+		mg_render(orca->debugOverlay.surface, orca->debugOverlay.canvas);
+		mg_surface_present(orca->debugOverlay.surface);
 	}
 
 	ui_init(&orca->debugOverlay.ui);