Merge pull request #65 from mitchellh/canvas

wasm: procedurally generated glyphs (i.e. box fonts) for web canvas

example/app.ts

@@ -35,6 +35,7 @@ fetch(url.href).then(response =>
     group_new,
     group_free,
     group_add_face,
+    group_init_sprite_face,
     group_index_for_codepoint,
     group_render_glyph,
     group_cache_new,
@@ -81,25 +82,49 @@ fetch(url.href).then(response =>
   //free(font_ptr);
 
   // Create our group
-  const group = group_new(72 /* size */);
+  const group = group_new(32 /* size */);
   group_add_face(group, 0 /* regular */, deferred_face_new(font_name.ptr, font_name.len, 0 /* text */));
   group_add_face(group, 0 /* regular */, deferred_face_new(font_name.ptr, font_name.len, 1 /* emoji */));
 
+  // Initialize our sprite font, without this we just use the browser.
+  group_init_sprite_face(group);
+
   // Create our group cache
   const group_cache = group_cache_new(group);
 
   // Render a glyph
-  for (let i = 33; i <= 126; i++) {
+  // for (let i = 33; i <= 126; i++) {
+  //   const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
+  //   group_cache_render_glyph(group_cache, font_idx, i, 0);
+  //   //face_render_glyph(face, atlas, i);
+  // }
+  //
+  // const emoji = ["🐏","🌞","🌚","🍱","💿","🐈","📃","📀","🕡","🙃"];
+  // for (let i = 0; i < emoji.length; i++) {
+  //   const cp = emoji[i].codePointAt(0);
+  //   const font_idx = group_cache_index_for_codepoint(group_cache, cp, 0, -1 /* best choice */);
+  //   group_cache_render_glyph(group_cache, font_idx, cp, 0);
+  // }
+
+  for (let i = 0x2500; i <= 0x257F; i++) {
     const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
     group_cache_render_glyph(group_cache, font_idx, i, 0);
-    //face_render_glyph(face, atlas, i);
   }
-
+  for (let i = 0x2580; i <= 0x259f; i++) {
-  const emoji = ["🐏","🌞","🌚","🍱","💿","🐈","📃","📀","🕡","🙃"];
+    const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
-  for (let i = 0; i < emoji.length; i++) {
+    group_cache_render_glyph(group_cache, font_idx, i, 0);
-    const cp = emoji[i].codePointAt(0);
+  }
-    const font_idx = group_cache_index_for_codepoint(group_cache, cp, 0, -1 /* best choice */);
+  for (let i = 0x2800; i <= 0x28FF; i++) {
-    group_cache_render_glyph(group_cache, font_idx, cp, 0);
+    const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
+    group_cache_render_glyph(group_cache, font_idx, i, 0);
+  }
+  for (let i = 0x1FB00; i <= 0x1FB3B; i++) {
+    const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
+    group_cache_render_glyph(group_cache, font_idx, i, 0);
+  }
+  for (let i = 0x1FB3C; i <= 0x1FB6B; i++) {
+    const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
+    group_cache_render_glyph(group_cache, font_idx, i, 0);
   }
 
   //face_render_glyph(face, atlas, "橋".codePointAt(0));

pkg/pixman/types.zig

@@ -73,7 +73,7 @@ pub const Fixed = enum(i32) {
 
     pub fn init(v: anytype) Fixed {
         return switch (@TypeOf(v)) {
-            comptime_int, u32 => @intToEnum(Fixed, v << 16),
+            comptime_int, i32, u32 => @intToEnum(Fixed, v << 16),
             f64 => @intToEnum(Fixed, @floatToInt(i32, v * 65536)),
             else => {
                 @compileLog(@TypeOf(v));

src/font/Group.zig

@@ -272,8 +272,6 @@ pub fn renderGlyph(
     max_height: ?u16,
 ) !Glyph {
     // Special-case fonts are rendered directly.
-    // TODO: web_canvas
-    if (options.backend != .web_canvas) {
     if (index.special()) |sp| switch (sp) {
         .sprite => return try self.sprite.?.renderGlyph(
             alloc,
@@ -281,7 +279,6 @@ pub fn renderGlyph(
             glyph_index,
         ),
     };
-    }
 
     const face = &self.faces.get(index.style).items[@intCast(usize, index.idx)];
     try face.load(self.lib, self.size);
@@ -314,6 +311,29 @@ pub const Wasm = struct {
         }
     }
 
+    export fn group_init_sprite_face(self: *Group) void {
+        return group_init_sprite_face_(self) catch |err| {
+            log.warn("error initializing sprite face err={}", .{err});
+            return;
+        };
+    }
+
+    fn group_init_sprite_face_(self: *Group) !void {
+        const metrics = metrics: {
+            const index = self.indexForCodepoint('M', .regular, .text).?;
+            const face = try self.faceFromIndex(index);
+            break :metrics face.metrics;
+        };
+
+        // Set details for our sprite font
+        self.sprite = font.sprite.Face{
+            .width = @floatToInt(u32, metrics.cell_width),
+            .height = @floatToInt(u32, metrics.cell_height),
+            .thickness = 2,
+            .underline_position = @floatToInt(u32, metrics.underline_position),
+        };
+    }
+
     export fn group_add_face(self: *Group, style: u16, face: *font.DeferredFace) void {
         return self.addFace(alloc, @intToEnum(Style, style), face.*) catch |err| {
             log.warn("error adding face to group err={}", .{err});

src/font/sprite.zig

@@ -1,5 +1,5 @@
 const std = @import("std");
-pub const Canvas = @import("sprite/Canvas.zig");
+pub usingnamespace @import("sprite/canvas.zig");
 pub const Face = @import("sprite/Face.zig");
 
 /// Sprites are represented as special codepoints outside of the Unicode

src/font/sprite/Canvas.zig

@@ -1,131 +0,0 @@
-//! This exposes primitives to draw 2D graphics and export the graphic to
-//! a font atlas.
-const Canvas = @This();
-
-const std = @import("std");
-const assert = std.debug.assert;
-const Allocator = std.mem.Allocator;
-const pixman = @import("pixman");
-const font = @import("../main.zig");
-
-/// The underlying image.
-image: *pixman.Image,
-
-/// The raw data buffer.
-data: []u32,
-
-pub const Rect = struct {
-    x: u32,
-    y: u32,
-    width: u32,
-    height: u32,
-};
-
-/// We only use alpha-channel so a pixel can only be "on" or "off".
-pub const Color = enum {
-    on,
-    off,
-
-    fn pixmanColor(self: Color) pixman.Color {
-        return switch (self) {
-            .on => .{ .red = 0xFFFF, .green = 0xFFFF, .blue = 0xFFFF, .alpha = 0xFFFF },
-            .off => .{ .red = 0, .green = 0, .blue = 0, .alpha = 0 },
-        };
-    }
-};
-
-pub fn init(alloc: Allocator, width: u32, height: u32) !Canvas {
-    // Determine the config for our image buffer. The images we draw
-    // for boxes are always 8bpp
-    const format: pixman.FormatCode = .a8;
-    const stride = format.strideForWidth(width);
-    const len = @intCast(usize, stride * @intCast(c_int, height));
-
-    // Allocate our buffer. pixman uses []u32 so we divide our length
-    // by 4 since u32 / u8 = 4.
-    var data = try alloc.alloc(u32, len / 4);
-    errdefer alloc.free(data);
-    std.mem.set(u32, data, 0);
-
-    // Create the image we'll draw to
-    const img = try pixman.Image.createBitsNoClear(
-        format,
-        @intCast(c_int, width),
-        @intCast(c_int, height),
-        data.ptr,
-        stride,
-    );
-    errdefer _ = img.unref();
-
-    return Canvas{
-        .image = img,
-        .data = data,
-    };
-}
-
-pub fn deinit(self: *Canvas, alloc: Allocator) void {
-    alloc.free(self.data);
-    _ = self.image.unref();
-    self.* = undefined;
-}
-
-/// Write the data in this drawing to the atlas.
-pub fn writeAtlas(self: *Canvas, alloc: Allocator, atlas: *font.Atlas) !font.Atlas.Region {
-    assert(atlas.format == .greyscale);
-
-    const width = @intCast(u32, self.image.getWidth());
-    const height = @intCast(u32, self.image.getHeight());
-    const region = try atlas.reserve(alloc, width, height);
-    if (region.width > 0 and region.height > 0) {
-        const depth = atlas.format.depth();
-
-        // Convert our []u32 to []u8 since we use 8bpp formats
-        const stride = self.image.getStride();
-        const data = @alignCast(
-            @alignOf(u8),
-            @ptrCast([*]u8, self.data.ptr)[0 .. self.data.len * 4],
-        );
-
-        // We can avoid a buffer copy if our atlas width and bitmap
-        // width match and the bitmap pitch is just the width (meaning
-        // the data is tightly packed).
-        const needs_copy = !(width * depth == stride);
-
-        // If we need to copy the data, we copy it into a temporary buffer.
-        const buffer = if (needs_copy) buffer: {
-            var temp = try alloc.alloc(u8, width * height * depth);
-            var dst_ptr = temp;
-            var src_ptr = data.ptr;
-            var i: usize = 0;
-            while (i < height) : (i += 1) {
-                std.mem.copy(u8, dst_ptr, src_ptr[0 .. width * depth]);
-                dst_ptr = dst_ptr[width * depth ..];
-                src_ptr += @intCast(usize, stride);
-            }
-            break :buffer temp;
-        } else data[0..(width * height * depth)];
-        defer if (buffer.ptr != data.ptr) alloc.free(buffer);
-
-        // Write the glyph information into the atlas
-        assert(region.width == width);
-        assert(region.height == height);
-        atlas.set(region, buffer);
-    }
-
-    return region;
-}
-
-/// Draw and fill a rectangle. This is the main primitive for drawing
-/// lines as well (which are just generally skinny rectangles...)
-pub fn rect(self: *Canvas, v: Rect, color: Color) void {
-    const boxes = &[_]pixman.Box32{
-        .{
-            .x1 = @intCast(i32, v.x),
-            .y1 = @intCast(i32, v.y),
-            .x2 = @intCast(i32, v.x + v.width),
-            .y2 = @intCast(i32, v.y + v.height),
-        },
-    };
-
-    self.image.fillBoxes(.src, color.pixmanColor(), boxes) catch {};
-}

src/font/sprite/canvas.zig

@@ -0,0 +1,457 @@
+//! This exposes primitives to draw 2D graphics and export the graphic to
+//! a font atlas.
+const std = @import("std");
+const assert = std.debug.assert;
+const Allocator = std.mem.Allocator;
+const js = @import("zig-js");
+const pixman = @import("pixman");
+const font = @import("../main.zig");
+
+pub const Point = struct {
+    x: i32,
+    y: i32,
+};
+
+pub const Line = struct {
+    p1: Point,
+    p2: Point,
+};
+
+pub const Box = struct {
+    x1: i32,
+    y1: i32,
+    x2: i32,
+    y2: i32,
+
+    pub fn rect(self: Box) Rect {
+        const tl_x = @min(self.x1, self.x2);
+        const tl_y = @min(self.y1, self.y2);
+        const br_x = @max(self.x1, self.x2);
+        const br_y = @max(self.y1, self.y2);
+        return .{
+            .x = tl_x,
+            .y = tl_y,
+            .width = @intCast(u32, br_x - tl_x),
+            .height = @intCast(u32, br_y - tl_y),
+        };
+    }
+};
+
+pub const Rect = struct {
+    x: i32,
+    y: i32,
+    width: u32,
+    height: u32,
+};
+
+pub const Triangle = struct {
+    p1: Point,
+    p2: Point,
+    p3: Point,
+};
+
+pub const Trapezoid = struct {
+    top: i32,
+    bottom: i32,
+    left: Line,
+    right: Line,
+};
+
+/// We only use alpha-channel so a pixel can only be "on" or "off".
+pub const Color = enum(u8) {
+    const CSS_BUF_MAX = 24;
+
+    on = 255,
+    off = 0,
+    _,
+
+    fn pixmanColor(self: Color) pixman.Color {
+        // pixman uses u16 for color while our color value is u8 so we
+        // scale it up proportionally.
+        const max = @intToFloat(f32, std.math.maxInt(u8));
+        const max_u16 = @intToFloat(f32, std.math.maxInt(u16));
+        const unscaled = @intToFloat(f32, @enumToInt(self));
+        const scaled = @floatToInt(u16, (unscaled * max_u16) / max);
+        return .{ .red = 0, .green = 0, .blue = 0, .alpha = scaled };
+    }
+
+    fn cssColor(self: Color, buf: []u8) ![]u8 {
+        return try std.fmt.bufPrint(buf, "rgba(0, 0, 0, {:.2})", .{
+            @intToFloat(f32, @enumToInt(self)) / 255,
+        });
+    }
+};
+
+/// Composition operations that are supported.
+pub const CompositionOp = enum {
+    // Note: more can be added here as needed.
+
+    source_out,
+
+    fn pixmanOp(self: CompositionOp) pixman.Op {
+        return switch (self) {
+            .source_out => .out,
+        };
+    }
+
+    fn jsOp(self: CompositionOp) js.String {
+        return switch (self) {
+            .source_out => js.string("source-out"),
+        };
+    }
+};
+
+pub const Canvas = switch (font.options.backend) {
+    .web_canvas => WebCanvasImpl,
+    else => PixmanImpl,
+};
+
+const WebCanvasImpl = struct {
+    /// The canvas element that is our final image.
+    canvas: js.Object,
+
+    /// Store the dimensions for easy access later.
+    width: u32,
+    height: u32,
+
+    pub fn init(alloc: Allocator, width: u32, height: u32) !WebCanvasImpl {
+        _ = alloc;
+
+        // Create our canvas that we're going to continue to reuse.
+        const doc = try js.global.get(js.Object, "document");
+        defer doc.deinit();
+        const canvas = try doc.call(js.Object, "createElement", .{js.string("canvas")});
+        errdefer canvas.deinit();
+
+        // Set our dimensions.
+        try canvas.set("width", width);
+        try canvas.set("height", height);
+
+        return WebCanvasImpl{
+            .canvas = canvas,
+            .width = width,
+            .height = height,
+        };
+    }
+
+    pub fn deinit(self: *WebCanvasImpl, alloc: Allocator) void {
+        _ = alloc;
+        self.canvas.deinit();
+        self.* = undefined;
+    }
+
+    pub fn rect(self: *WebCanvasImpl, v: Rect, color: Color) void {
+        const ctx = self.context(color) catch return;
+        defer ctx.deinit();
+        ctx.call(void, "fillRect", .{
+            @intCast(u32, v.x),
+            @intCast(u32, v.y),
+            v.width,
+            v.height,
+        }) catch return;
+    }
+
+    pub fn trapezoid(self: *WebCanvasImpl, t: Trapezoid) void {
+        const ctx = self.context(.on) catch return;
+        defer ctx.deinit();
+
+        ctx.call(void, "beginPath", .{}) catch return;
+        ctx.call(void, "moveTo", .{ t.left.p1.x, t.left.p1.y }) catch return;
+        ctx.call(void, "lineTo", .{ t.right.p1.x, t.right.p1.y }) catch return;
+        ctx.call(void, "lineTo", .{ t.right.p2.x, t.right.p2.y }) catch return;
+        ctx.call(void, "lineTo", .{ t.left.p2.x, t.left.p2.y }) catch return;
+        ctx.call(void, "fill", .{}) catch return;
+    }
+
+    pub fn triangle(self: *WebCanvasImpl, t: Triangle, color: Color) void {
+        const ctx = self.context(color) catch return;
+        defer ctx.deinit();
+
+        ctx.call(void, "beginPath", .{}) catch return;
+        ctx.call(void, "moveTo", .{ t.p1.x, t.p1.y }) catch return;
+        ctx.call(void, "lineTo", .{ t.p2.x, t.p2.y }) catch return;
+        ctx.call(void, "lineTo", .{ t.p3.x, t.p3.y }) catch return;
+        ctx.call(void, "fill", .{}) catch return;
+    }
+
+    pub fn composite(
+        self: *WebCanvasImpl,
+        op: CompositionOp,
+        src: *const WebCanvasImpl,
+        dest: Rect,
+    ) void {
+        const ctx = self.context(Color.on) catch return;
+        defer ctx.deinit();
+
+        // Set our compositing operation
+        ctx.set("globalCompositeOperation", op.jsOp()) catch return;
+
+        // Composite
+        ctx.call(void, "drawImage", .{
+            src.canvas,
+            dest.x,
+            dest.y,
+            dest.width,
+            dest.height,
+        }) catch return;
+    }
+
+    fn context(self: WebCanvasImpl, fill: ?Color) !js.Object {
+        const ctx = try self.canvas.call(js.Object, "getContext", .{js.string("2d")});
+        errdefer ctx.deinit();
+
+        // Reset our composite operation
+        try ctx.set("globalCompositeOperation", js.string("source-over"));
+
+        // Set our fill color
+        if (fill) |c| {
+            var buf: [Color.CSS_BUF_MAX]u8 = undefined;
+            const color = try c.cssColor(&buf);
+            try ctx.set("fillStyle", js.string(color));
+        }
+
+        return ctx;
+    }
+
+    pub fn writeAtlas(self: *WebCanvasImpl, alloc: Allocator, atlas: *font.Atlas) !font.Atlas.Region {
+        assert(atlas.format == .greyscale);
+
+        // Reload our context since we resized the canvas
+        const ctx = try self.context(null);
+        defer ctx.deinit();
+
+        // Set our width/height. Set to vars in case we just query the canvas later.
+        const width = self.width;
+        const height = self.height;
+
+        // Read the image data and get it into a []u8 on our side
+        const bitmap: []u8 = bitmap: {
+            // Read the raw bitmap data and get the "data" value which is a
+            // Uint8ClampedArray.
+            const data = try ctx.call(js.Object, "getImageData", .{ 0, 0, width, height });
+            defer data.deinit();
+            const src_array = try data.get(js.Object, "data");
+            defer src_array.deinit();
+
+            // Allocate our local memory to copy the data to.
+            const len = try src_array.get(u32, "length");
+            var bitmap = try alloc.alloc(u8, @intCast(usize, len));
+            errdefer alloc.free(bitmap);
+
+            // Create our target Uint8Array that we can use to copy from src.
+            const mem_array = mem_array: {
+                // Get our runtime memory
+                const mem = try js.runtime.get(js.Object, "memory");
+                defer mem.deinit();
+                const buf = try mem.get(js.Object, "buffer");
+                defer buf.deinit();
+
+                // Construct our array to peer into our memory
+                const Uint8Array = try js.global.get(js.Object, "Uint8Array");
+                defer Uint8Array.deinit();
+                const mem_array = try Uint8Array.new(.{ buf, bitmap.ptr });
+                errdefer mem_array.deinit();
+
+                break :mem_array mem_array;
+            };
+            defer mem_array.deinit();
+
+            // Copy
+            try mem_array.call(void, "set", .{src_array});
+
+            break :bitmap bitmap;
+        };
+        errdefer alloc.free(bitmap);
+
+        // Convert the format of the bitmap to A8 since the raw canvas data
+        // is in RGBA.
+        // NOTE(mitchellh): do we need a 1px buffer to avoid artifacts?
+        const bitmap_a8: []u8 = a8: {
+            assert(@mod(bitmap.len, 4) == 0);
+            assert(bitmap.len == width * height * 4);
+            var bitmap_a8 = try alloc.alloc(u8, bitmap.len / 4);
+            errdefer alloc.free(bitmap_a8);
+            var i: usize = 0;
+            while (i < bitmap_a8.len) : (i += 1) {
+                bitmap_a8[i] = bitmap[(i * 4) + 3];
+            }
+
+            break :a8 bitmap_a8;
+        };
+        defer alloc.free(bitmap_a8);
+
+        // Write the glyph information into the atlas
+        const region = try atlas.reserve(alloc, width, height);
+        if (region.width > 0 and region.height > 0) {
+            assert(region.width == width);
+            assert(region.height == height);
+            atlas.set(region, bitmap_a8);
+        }
+
+        return region;
+    }
+};
+
+const PixmanImpl = struct {
+    /// The underlying image.
+    image: *pixman.Image,
+
+    /// The raw data buffer.
+    data: []u32,
+
+    pub fn init(alloc: Allocator, width: u32, height: u32) !Canvas {
+        // Determine the config for our image buffer. The images we draw
+        // for boxes are always 8bpp
+        const format: pixman.FormatCode = .a8;
+        const stride = format.strideForWidth(width);
+        const len = @intCast(usize, stride * @intCast(c_int, height));
+
+        // Allocate our buffer. pixman uses []u32 so we divide our length
+        // by 4 since u32 / u8 = 4.
+        var data = try alloc.alloc(u32, len / 4);
+        errdefer alloc.free(data);
+        std.mem.set(u32, data, 0);
+
+        // Create the image we'll draw to
+        const img = try pixman.Image.createBitsNoClear(
+            format,
+            @intCast(c_int, width),
+            @intCast(c_int, height),
+            data.ptr,
+            stride,
+        );
+        errdefer _ = img.unref();
+
+        return Canvas{
+            .image = img,
+            .data = data,
+        };
+    }
+
+    pub fn deinit(self: *Canvas, alloc: Allocator) void {
+        alloc.free(self.data);
+        _ = self.image.unref();
+        self.* = undefined;
+    }
+
+    /// Write the data in this drawing to the atlas.
+    pub fn writeAtlas(self: *Canvas, alloc: Allocator, atlas: *font.Atlas) !font.Atlas.Region {
+        assert(atlas.format == .greyscale);
+
+        const width = @intCast(u32, self.image.getWidth());
+        const height = @intCast(u32, self.image.getHeight());
+        const region = try atlas.reserve(alloc, width, height);
+        if (region.width > 0 and region.height > 0) {
+            const depth = atlas.format.depth();
+
+            // Convert our []u32 to []u8 since we use 8bpp formats
+            const stride = self.image.getStride();
+            const data = @alignCast(
+                @alignOf(u8),
+                @ptrCast([*]u8, self.data.ptr)[0 .. self.data.len * 4],
+            );
+
+            // We can avoid a buffer copy if our atlas width and bitmap
+            // width match and the bitmap pitch is just the width (meaning
+            // the data is tightly packed).
+            const needs_copy = !(width * depth == stride);
+
+            // If we need to copy the data, we copy it into a temporary buffer.
+            const buffer = if (needs_copy) buffer: {
+                var temp = try alloc.alloc(u8, width * height * depth);
+                var dst_ptr = temp;
+                var src_ptr = data.ptr;
+                var i: usize = 0;
+                while (i < height) : (i += 1) {
+                    std.mem.copy(u8, dst_ptr, src_ptr[0 .. width * depth]);
+                    dst_ptr = dst_ptr[width * depth ..];
+                    src_ptr += @intCast(usize, stride);
+                }
+                break :buffer temp;
+            } else data[0..(width * height * depth)];
+            defer if (buffer.ptr != data.ptr) alloc.free(buffer);
+
+            // Write the glyph information into the atlas
+            assert(region.width == width);
+            assert(region.height == height);
+            atlas.set(region, buffer);
+        }
+
+        return region;
+    }
+
+    /// Draw and fill a rectangle. This is the main primitive for drawing
+    /// lines as well (which are just generally skinny rectangles...)
+    pub fn rect(self: *Canvas, v: Rect, color: Color) void {
+        const boxes = &[_]pixman.Box32{
+            .{
+                .x1 = @intCast(i32, v.x),
+                .y1 = @intCast(i32, v.y),
+                .x2 = @intCast(i32, v.x + @intCast(i32, v.width)),
+                .y2 = @intCast(i32, v.y + @intCast(i32, v.height)),
+            },
+        };
+
+        self.image.fillBoxes(.src, color.pixmanColor(), boxes) catch {};
+    }
+
+    /// Draw and fill a trapezoid.
+    pub fn trapezoid(self: *Canvas, t: Trapezoid) void {
+        self.image.rasterizeTrapezoid(.{
+            .top = pixman.Fixed.init(t.top),
+            .bottom = pixman.Fixed.init(t.bottom),
+            .left = .{
+                .p1 = .{
+                    .x = pixman.Fixed.init(t.left.p1.x),
+                    .y = pixman.Fixed.init(t.left.p1.y),
+                },
+                .p2 = .{
+                    .x = pixman.Fixed.init(t.left.p2.x),
+                    .y = pixman.Fixed.init(t.left.p2.y),
+                },
+            },
+            .right = .{
+                .p1 = .{
+                    .x = pixman.Fixed.init(t.right.p1.x),
+                    .y = pixman.Fixed.init(t.right.p1.y),
+                },
+                .p2 = .{
+                    .x = pixman.Fixed.init(t.right.p2.x),
+                    .y = pixman.Fixed.init(t.right.p2.y),
+                },
+            },
+        }, 0, 0);
+    }
+
+    /// Draw and fill a triangle.
+    pub fn triangle(self: *Canvas, t: Triangle, color: Color) void {
+        const tris = &[_]pixman.Triangle{
+            .{
+                .p1 = .{ .x = pixman.Fixed.init(t.p1.x), .y = pixman.Fixed.init(t.p1.y) },
+                .p2 = .{ .x = pixman.Fixed.init(t.p2.x), .y = pixman.Fixed.init(t.p2.y) },
+                .p3 = .{ .x = pixman.Fixed.init(t.p3.x), .y = pixman.Fixed.init(t.p3.y) },
+            },
+        };
+
+        const src = pixman.Image.createSolidFill(color.pixmanColor()) catch return;
+        defer _ = src.unref();
+        self.image.compositeTriangles(.over, src, .a8, 0, 0, 0, 0, tris);
+    }
+
+    /// Composite one image on another.
+    pub fn composite(self: *Canvas, op: CompositionOp, src: *const Canvas, dest: Rect) void {
+        self.image.composite(
+            op.pixmanOp(),
+            src.image,
+            null,
+            0,
+            0,
+            0,
+            0,
+            @intCast(i16, dest.x),
+            @intCast(i16, dest.y),
+            @intCast(u16, dest.width),
+            @intCast(u16, dest.height),
+        );
+    }
+};

src/font/sprite/underline.zig

@@ -78,7 +78,7 @@ const Draw = struct {
     fn drawSingle(self: Draw, canvas: *font.sprite.Canvas) void {
         canvas.rect(.{
             .x = 0,
-            .y = self.pos,
+            .y = @intCast(i32, self.pos),
             .width = self.width,
             .height = self.thickness,
         }, .on);
@@ -88,14 +88,14 @@ const Draw = struct {
     fn drawDouble(self: Draw, canvas: *font.sprite.Canvas) void {
         canvas.rect(.{
             .x = 0,
-            .y = self.pos,
+            .y = @intCast(i32, self.pos),
             .width = self.width,
             .height = self.thickness,
         }, .on);
 
         canvas.rect(.{
             .x = 0,
-            .y = self.pos + (self.thickness * 2),
+            .y = @intCast(i32, self.pos + (self.thickness * 2)),
             .width = self.width,
             .height = self.thickness,
         }, .on);
@@ -108,8 +108,8 @@ const Draw = struct {
         var i: u32 = 0;
         while (i < dot_count) : (i += 2) {
             canvas.rect(.{
-                .x = i * dot_width,
+                .x = @intCast(i32, i * dot_width),
-                .y = self.pos,
+                .y = @intCast(i32, self.pos),
                 .width = dot_width,
                 .height = self.thickness,
             }, .on);
@@ -123,8 +123,8 @@ const Draw = struct {
         var i: u32 = 0;
         while (i < dash_count) : (i += 2) {
             canvas.rect(.{
-                .x = i * dash_width,
+                .x = @intCast(i32, i * dash_width),
-                .y = self.pos,
+                .y = @intCast(i32, self.pos),
                 .width = dash_width,
                 .height = self.thickness,
             }, .on);
@@ -157,8 +157,8 @@ const Draw = struct {
             while (row < self.thickness) : (row += 1) {
                 const y1 = @min(row + y + vertical, y_max);
                 canvas.rect(.{
-                    .x = x,
+                    .x = @intCast(i32, x),
-                    .y = y1,
+                    .y = @intCast(i32, y1),
                     .width = 1,
                     .height = 1,
                 }, .on);