Transition to Skia-based Rendering Engine (CanvasKit) + Typography Enhancements

[canboyedits]

Hi @suikadev and community,

First off, thank you for the amazing work on Suika — it’s one of the cleanest, most modular HTML5 vector editors out there. 🙌 Its separation of core, rendering, and UI makes it incredibly approachable and extensible.

I'm working on a production-grade desktop web application that relies heavily on Suika’s canvas engine, and I’m reaching out to propose/discuss:

🚀 Proposal Summary

Rendering Engine: Transition Suika’s canvas renderer to CanvasKit (Skia via WebAssembly) for GPU-accelerated performance.

Typography: Add advanced typographic support, including:

Multi-column layout

Inline font styles (bold, italic, underline, spans)

Ligatures and kerning

Text wrapping around vector shapes (especially images)

🔥 Why Skia / CanvasKit?

Right now, Suika redraws the entire scene graph using the HTML5 Canvas 2D API, which is conceptually simple but has performance issues for:

Larger documents (e.g. 3000+ words, multiple high-res images)

Frequent pan/zoom/redraw

Collaborative editing with live shape deltas

CanvasKit offers:

Hardware-accelerated drawing (via WebGL2/WebGPU)

Real subpixel font rendering and native ligature/kerning support

True retained-mode vector compositing

Better performance on low-end machines

Native support for paragraph layout (ParagraphBuilder) and rich text

This would be a huge step forward for rendering efficiency and visual fidelity.

📝 Why Typography Enhancements?

A number of professional/editorial workflows need more than flat text:

Text columns: Required in layout design (magazines, newspapers, blogs)

Text wrapping: Essential for aligning text around images or shapes

Mixed styles: Per-span styling (bold, italics, font changes) within one text block

Typography control: Letter spacing, line height, kerning, ligatures, etc.

Right now, Suika only supports basic text blocks with uniform styling. Canvas 2D offers no native support for the above — but Skia does.

🧩 Proposed Architectural Approach
This could be tackled incrementally:

Phase 1: Pluggable Renderer
Abstract the renderer behind a clean interface (IRenderer)

Keep existing Canvas2D renderer for fallback

Add new CanvasKitRenderer via @canvaskit/canvaskit-wasm

Ensure shape drawing (Rect, Text, Path, Group, etc.) maps to CanvasKit API

Phase 2: Rich Text Model
Update text node structure to support:

ts
Copy
Edit

type TextRun = { text: string, style: { font, bold, italic, color, ... } }
interface RichText {
runs: TextRun[];
layout?: 'column' | 'wrap';
frame?: Rect;
}
UI updates to handle inline formatting tools

Phase 3: Typographic Layout
Use CanvasKit’s ParagraphBuilder for rendering styled text with line breaks

Add optional text-shape exclusion logic for wrapping (collision/contour)

Columns: Calculate sub-frames inside a text container and layout text across

Phase 4: Collaboration-aware Optimizations
Cache paragraph layout results in memory

Load/render text blocks only when visible (virtualized editing)

Redis or IndexedDB for real-time canvas object sync + local edit buffer

🧠 Open Questions

Would Suika be open to exposing a renderer abstraction layer?

Any prior considerations/discussions about CanvasKit adoption?

Preferred method for integrating a pluggable rendering backend?

✅ Benefits

Massive performance boost for complex documents

Full desktop-publishing typography features

More competitive with tools like Figma, Canva, Scribus, InDesign

Foundation for PDF export fidelity, print layouts, and WYSIWYG output

Would love to hear your thoughts, and happy to help with prototyping or submitting PRs where useful.

Thanks again for building Suika! 🎨

—

Tags: enhancement, performance, typography, canvaskit, text, collaboration, rendering-engine

[F-star]

That is good idea, I tried to use pixi.js as renderer in the past, but it render teriible. So I looked at Canvaskit later, but it's more underlying compared with pixi.js, and I need to do more work in it, so I didn't change renderer, but I was very intereted in it.

You are right, and I will do some works for renderer, because I think performance is timed to optimize.

Text rendering also in the plan.

[canboyedits]

Let's make the engine swap together as it will help me to achieve what next on my mind, could you guide me where to start from. Let's make a new thread for that and start sharing the work and make the rendering 10x faster and efficient.

I cannot access the documentation as its WeChat Article we do not have WeChat in our country is there any other way to study the canvas core

[F-star]

https://blog.fstars.wang/graphics-editor/archive.html

You can visit this website to access the document.

[canboyedits]

Can you guide or layout a plan to start the shift to Skia CanvasKit.

Which feature to target first will make a hybrid approach for development so can monitor the difference what do you think.
can start with zoom in and zoom out rendering, image and text rendering on Skia then plan the full swap.

Again your help will really matter to this, I tried to add skia but facing issue of text not rendering on canvas if you guide to start from where it would really mean a lot.

Thank You!!!