Canvas Text Shaping

[shallawa]

Add an explainer for WebKit proposal for Canvas Text shaping. Another proposal has been discussed here[1].

[1] https://github.com/fserb/canvas2D/blob/master/spec/enhanced-textmetrics.md

[schenney-chromium]

Could you add an example of text-on-path? I'm having trouble seeing how you would draw a sequence of GlyphRun along a non-linear path.

[shallawa]

It can be something like this:

function fillClustersOnCircle(ctx, text, centerX, centerY, radius)
{
    const clusters = ctx.splitText(text);
    const clustersWidth = clusters.reduce((width, cluster) => width + cluster.textMetrics().width, 0);

    let distance = 0;
    for (const cluster of clusters) {
        const ratio = distance / clustersWidth;
        const angle = 2 * Math.PI * ratio;
        const x = radius * Math.cos(angle) + centerX;
        const y = radius * Math.sin(angle) + centerY;

        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle + Math.PI / 2);
        ctx.fillGlyphRun(cluster, 0, 0);
        ctx.restore();

        distance += cluster.textMetrics().width;
    }
}

[shallawa]

Having fillText(), fillGlyphRuns() and fillGlyphRun() give freedom to do different scenarios:

• fillText() can be used when no special breaking or styling is required. All text can be displayed in one call.
• fillGlyphRuns() can be used when special breaking (like clusters or word boundaries) or styling is required. But the text is displayed in the increasing horizontal direction of the context.
• fillGlyphRun() can be used similar to fillGlyphRuns() but the display position is customizable.