Automattic/node-canvas

Support context.letterSpacing

Open

#1,014 opened on Sep 30, 2017

View on GitHub
 (21 comments) (2 reactions) (0 assignees)JavaScript (9,524 stars) (1,140 forks)batch import
FeatureHelp wantedText & Fonts

Description

Issue or Feature

I would like to be able to adjust the kerning/letter-spacing of fonts when drawing text on node-canvas. In a browser this is possible by setting canvas.style.letterSpacing to something like "-3px". But canvas.style I believe does not exist on node-canvas.

(BTW we love node-canvas, it is an amazing piece of software.)

Steps to Reproduce

Interactive example of it working with browser-based Canvas:

https://jsfiddle.net/hg4pbsne/1/

Example code:

  canvas.style.letterSpacing = '-5px';
  ctx = canvas.getContext('2d');
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = '4em sans-serif';
  ctx.fillText('World', can.width/2, can.height*3/4);

This is not possible to reproduce with node-canvas as there is no canvas.style property exposed.

Your Environment

All versions of node-canvas.

My Suggestion

We add a non-standard ctx._letterSpacing parameter to node-canvas that exposes this functionality?

Contributor guide

Tech stack
javascriptnodejs
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Node.jsC++/CairoCanvas text rendering
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
Investigate the existing text rendering pipeline in node canvas, specifically in src/Canvas.cc and src/CanvasRenderingContext2d.cc. Understand how font properties like fontSize and fontFamily are currently passed to Cairo. Implement a new property letterSpacing in the JS context and propagate it to the Cairo text layout functions. Consider using cairo text extents or similar. The issue has a discussion about implementation details; review comments #1014 for potential approaches.
Support context.letterSpacing · Automattic/node-canvas#1014 | Good First Issue