text-to-canvas 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v1.2.0
+
+- New `strokeColor` and `strokeWidth` text formatting options to control the outline of the text ([#292](https://github.com/stefcameron/text-to-canvas/issues/292)).
+    - Note that due to how the `strokeText()` and `measureText()` Canvas APIs work, the stroke is __not considered__ in text placement. Setting a large width will result in the stroke "bleeding" outside the text box.
+
 ## v1.1.2
 
 - Fixed bug where `drawText()` config `fontColor` option was not being included in the base font format used to render the text ([#64](https://github.com/stefcameron/text-to-canvas/issues/64)).

package/README.md

@@ -49,6 +49,8 @@ $ yarn add text-to-canvas
 
 This project __optionally__ depends on the [canvas](https://github.com/Automattic/node-canvas) package which enables it to be used in a Node [demo](#node).
 
+> ❗️ Note this is __optional__ as `text-to-canvas` does not formally support this library. This is purely for casual testing and as an example of how `text-to-canvas` should technically work with any library that supports the `HTMLCanvasElement` API. `text-to-canvas` only officially supports HTML `<canvas>`.
+
 Since this package needs to be compiled for use on the platform on which you intend to install/use it, the author must either include pre-built binaries specific to your OS when they make a [release](https://github.com/Automattic/node-canvas/releases), or a new binary must be compiled by your package manager (i.e. `npm`) upon installation.
 
 If you're installing on a newer Apple M1, M2, or M3 computer, or if you're using a version of Node newer than v20 (the latest LTS at time of writing), you may experience a `node-pre-gyp` failure because `canvas` doesn't provide pre-built binaries for the ARM64 architecture, only providing x86-64 (Intel x64) binaries for Node v20.
@@ -100,7 +102,7 @@ const text = 'Lorem ipsum dolor sit amet';
 // OR with some formatting
 const text: Word[] = [
   { text: 'Lorem' },
-  { text: 'ipsum', format: { fontWeight: 'bold', color: 'red' } },
+  { text: 'ipsum', format: { fontWeight: 'bold', fontColor: 'red' } },
   { text: 'dolor', format: { fontStyle: 'italic' } },
   { text: 'sit' },
   { text: 'amet' },
@@ -177,12 +179,14 @@ You can run this demo locally with `npm run node:demo`
 | `y`               | `0`          | Y position of the text box.                                   |
 | `align`           | `center`     | Text align. Other possible values: `left`, `right`.           |
 | `vAlign`          | `middle`     | Text vertical align. Other possible values: `top`, `bottom`.  |
-| `font`            | `Arial`      | Base font family of the text.                                 |
+| `fontFamily`      | `Arial`      | Base font family of the text.                                 |
 | `fontSize`        | `14`         | Base font size of the text in px.                             |
 | `fontStyle`       | `''`         | Base font style, same as css font-style. Examples: `italic`, `oblique 40deg`. |
 | `fontVariant`     | `''`         | Base font variant, same as css font-variant. Examples: `small-caps`. |
 | `fontWeight`      | `'400'`      | Base font weight, same as css font-weight. Examples: `bold`, `100`. |
 | `fontColor`       | `'black'`    | Base font color, same as css color. Examples: `blue`, `#00ff00`. |
+| `strokeColor`     | `'black'`    | Base stroke color, same as css color. Examples: `blue`, `#00ff00`. |
+| `strokeWidth`     | `0`          | Base stroke width. Positive number; `<=0` means none. Can be fractional. ⚠️ Word splitting does not take into account the stroke, which is applied on the __center__ of the edges of the text via the [strokeText()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeText) Canvas API. Setting a thick stroke will cause it to bleed out of the text box. |
 | `justify`         | `false`      | Justify text if `true`, it will insert spaces between words when necessary. |
 | `inferWhitespace` | `true`       | If whitespace in the text should be inferred. Only applies if the text given to `drawText()` is a `Word[]`. If the text is a `string`, this config setting is ignored. |
 | `overflow`        | `true`       | Allows the text to overflow out of the box if the box is too narrow/short to fit it all. `false` will clip the text to the box's boundaries. |
@@ -303,6 +307,10 @@ const drawWords = (baseFormat: TextFormat, spec: RenderSpec) => {
   ctx.textBaseline = textBaseline;
   ctx.font = getTextStyle(baseFormat);
   ctx.fillStyle = baseFormat.fontColor;
+  ctx.strokeStyle = baseFormat.strokeColor;
+  ctx.lineJoin = 'round';
+
+  const baseStrokeWidth = baseFormat.strokeWidth
 
   lines.forEach((line) => {
     line.forEach((pw) => {
@@ -313,8 +321,19 @@ const drawWords = (baseFormat: TextFormat, spec: RenderSpec) => {
           if (pw.format.fontColor) {
             ctx.fillStyle = pw.format.fontColor;
           }
+          if (pw.format.strokeColor) {
+            ctx.strokeStyle = pw.format.strokeColor;
+          }
         }
         ctx.fillText(pw.word.text, pw.x, pw.y);
+        // stroke AFTER fill so it goes on top
+        const lineWidth = typeof pw.format?.strokeWidth === 'number'
+          ? pw.format.strokeWidth
+          : baseStrokeWidth;
+        if (lineWidth > 0) {
+          ctx.lineWidth = lineWidth;
+          ctx.strokeText(pw.word.text, pw.x, pw.y);
+        }
         if (pw.format) {
           ctx.restore();
         }
@@ -325,7 +344,7 @@ const drawWords = (baseFormat: TextFormat, spec: RenderSpec) => {
 
 const words: Word[] = [
   { text: 'Lorem' },
-  { text: 'ipsum', format: { fontWeight: 'bold', color: 'red' } },
+  { text: 'ipsum', format: { fontWeight: 'bold', fontColor: 'red' } },
   { text: 'dolor', format: { fontStyle: 'italic' } },
   { text: 'sit' },
   { text: 'amet' },
@@ -363,3 +382,9 @@ worker.onmessage = (event) => {
 ```
 
 </details>
+
+# Help
+
+## Blurry text
+
+If you're experiencing an issue where, "the text quality rendered on the canvas appears lower than that rendered in the DOM across various device resolutions," this may be caused by __pixel density__ settings. See the discussion on [issue #69](https://github.com/stefcameron/text-to-canvas/issues/69#issuecomment-2136498781) for a possible solution.

package/dist/text-to-canvas.cjs

@@ -3,6 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const DEFAULT_FONT_FAMILY = "Arial";
 const DEFAULT_FONT_SIZE = 14;
 const DEFAULT_FONT_COLOR = "black";
+const DEFAULT_STROKE_COLOR = DEFAULT_FONT_COLOR;
+const DEFAULT_STROKE_WIDTH = 0;
+const DEFAULT_STROKE_JOIN = "round";
 const getTextFormat = (format, baseFormat) => {
   return Object.assign(
     {},
@@ -12,7 +15,9 @@ const getTextFormat = (format, baseFormat) => {
       fontWeight: "400",
       fontStyle: "",
       fontVariant: "",
-      fontColor: DEFAULT_FONT_COLOR
+      fontColor: DEFAULT_FONT_COLOR,
+      strokeColor: DEFAULT_STROKE_COLOR,
+      strokeWidth: DEFAULT_STROKE_WIDTH
     },
     baseFormat,
     format
@@ -474,7 +479,9 @@ const drawText = (ctx, text, config) => {
     fontStyle: config.fontStyle,
     fontVariant: config.fontVariant,
     fontWeight: config.fontWeight,
-    fontColor: config.fontColor
+    fontColor: config.fontColor,
+    strokeColor: config.strokeColor,
+    strokeWidth: config.strokeWidth
   });
   const {
     width: boxWidth,
@@ -506,6 +513,9 @@ const drawText = (ctx, text, config) => {
   ctx.textBaseline = textBaseline;
   ctx.font = getTextStyle(baseFormat);
   ctx.fillStyle = baseFormat.fontColor || DEFAULT_FONT_COLOR;
+  ctx.strokeStyle = baseFormat.strokeColor || DEFAULT_STROKE_COLOR;
+  ctx.lineJoin = DEFAULT_STROKE_JOIN;
+  const baseStrokeWidth = baseFormat.strokeWidth ?? DEFAULT_STROKE_WIDTH;
   if (config.overflow === false) {
     ctx.beginPath();
     ctx.rect(boxX, boxY, boxWidth, boxHeight);
@@ -520,8 +530,16 @@ const drawText = (ctx, text, config) => {
           if (pw.format.fontColor) {
             ctx.fillStyle = pw.format.fontColor;
           }
+          if (pw.format.strokeColor) {
+            ctx.strokeStyle = pw.format.strokeColor;
+          }
         }
         ctx.fillText(pw.word.text, pw.x, pw.y);
+        const lineWidth = typeof pw.format?.strokeWidth === "number" ? pw.format.strokeWidth : baseStrokeWidth;
+        if (lineWidth > 0) {
+          ctx.lineWidth = lineWidth;
+          ctx.strokeText(pw.word.text, pw.x, pw.y);
+        }
         if (pw.format) {
           ctx.restore();
         }