Canvas C CGI Renderer
Code — embedded_gui.c C Source
Canvas Output
Terminal

Primary Use Cases

This environment allows you to write raw C/C++ code and compile it directly in your browser using WebAssembly to output pixel graphics on an HTML canvas.

  • Embedded GUI Prototyping: Design custom UI widgets, menus, and gauge displays for microcontrollers (e.g., STM32, ESP32, AVR driving OLED/TFT LCD screens) without waiting for hardware flashing cycles.
  • Rasterization Algorithm Testing: Experiment with low-level pixel manipulation, line drawing (Bresenham's algorithm), and custom bitmap font blitting.
  • CGI Output Validation: Test server-side raw CGI binary dynamic image generation headers before deployment.

How to Use

  1. Write your C framebuffer drawing or CGI script inside the Code Editor panel.
  2. Stream out image header data (such as Portable Pixel Map - PPM/P6 or CGI headers) to standard stdout.
  3. Click Compile & Run to trigger WebAssembly compilation and instantly preview your visual output in the Canvas Output panel.
  4. Debug memory allocations, compilation warnings, or execution timings inside the Terminal panel below.

Canvas API & Primitives

draw_pixel(x, y, color)

Writes an RGB color value to a specific pixel coordinate in the frame buffer array.

draw_line(x0, y0, x1, y1, color)

Renders a 1-pixel vector line between two points using Bresenham's line algorithm.

draw_rect(x, y, width, height, fill, color)

Draws a stroke outline or filled bounding rectangle for buttons, panels, or bars.

draw_text(x, y, "string", font_matrix, color)

Blits monochromatic 8x8 bitmap glyphs onto the canvas for UI text and metrics.