[feature request] loading custom font support

[andykais]

deno-canvas supports writing text to a canvas:

import { createCanvas } from 'https://deno.land/x/canvas/mod.ts'

const canvas = createCanvas(500,600)
const ctx = canvas.getContext('2d')
ctx.fillStyle='red'
ctx.fillText(50,50,"Hello World")
await Deno.writeFile("image.png", canvas.toBuffer());

this is currently only limited to fonts your system knows about (it might even be more limited than that). Canvas kit has an api for loading custom fonts https://skia.org/docs/user/modules/quickstart/#text-shaping. Itd be great if deno-canvas supported loading custom fonts. I think pulling in the whole paragraph builder api might be substantial, but all I would personally be interested in is mirroring the browser's canvas apis with the addition of being able to load custom fonts. E.g.

import { createCanvas, registerFont } from 'https://deno.land/x/canvas/mod.ts'

const canvas = createCanvas(500,600)
const ctx = canvas.getContext('2d')
await registerFont({
  font_family: 'Comic Sans',
  // extra fancy would be supporting a url here (e.g. file:///my-fonts/comic-sans.ttf or any web url)
  src: './my-fonts/comic-sans.ttf'
})
ctx.font = 'Comic Sans'
ctx.fillStyle='red'
ctx.fillText(50,50,"Hello World")
await Deno.writeFile("image.png", canvas.toBuffer());

the registerFont method is very similar to the css interface for loading fonts:

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}

[andykais]

[edit]
it seems like ctx.font = is not a supported api at all in the current version. Setting font to anything, including fonts available to the system looks like:

> ctx.font = 'Roboto'
Uncaught TypeError: Cannot read property 'family' of null
    at q.set [as font] (https://deno.land/x/canvas@v1.3.0/src/lib.js:2264:37)
    at <anonymous>:2:10

[DjDeveloperr]

For loading custom fonts, there is canvas.loadFont.

For setting font you'll need to specify size too.

And deno-canvas cannot access system fonts either btw, so initially it's limited to one font IIRC.

[andykais]

oh if this is already supported thats fantastic. I am looking at the code now https://github.com/DjDeveloperr/deno-canvas/blob/master/src/types.ts#L1065, what should the descriptors field be?

[andykais]

ah, I figured it out:

canvas.loadFont(fontBuffer, {
  family: 'Comic Sans',
  style: 'normal',
  weight: 'normal',
  variant: 'normal'
})

it probably wouldnt hurt to make the type signatures more specific than Record<string, string>. Perhaps:

type FontDescriptors = {
  /* identifying name of font */
  family: string
  style: 'normal' | 'italic'
  variant: 'normal' | ...
  weight: 'normal' | 'bold' | ...
}
  loadFont(
    bytes: ArrayBuffer | Uint8Array,
    descriptors: FontDescriptors,
  ): void;

[andykais]

seems like the context.measureText results are very inaccurate.

const text = "Hello There"
const family = './fonts/stick-no-bills/StickNoBills-VariableFont_wght.ttf'
// load a font
    const font = await Deno.readFile(family)
    const font_identifier = new Date().toString()
    canvas.loadFont(font, {
      family: font_identifier
    })
    context.font = `${size}px ${font_identifier}`
// get the font measurements
  const metrics = context.measureText(text)
// draw a rect around it
    context.fillStyle = 'white'
    context.fillRect(0, 0, metrics.width, metrics.fontBoundingBoxAscent + metrics.actualBoundingBoxDescent)
// draw the text
    context.fillStyle =  "black"
    context.fillText(text_chunk, 0, 0)

here they are for one font https://fonts.google.com/specimen/Stick+No+Bills

{
  width: 352,
  actualBoundingBoxAscent: 38,
  actualBoundingBoxDescent: 2,
  actualBoundingBoxLeft: 5,
  actualBoundingBoxRight: 357,
  fontBoundingBoxAscent: 47,
  fontBoundingBoxDescent: 15.600000381469727
}

here they are for another https://www.fontspace.com/category/comic-sans

{
  width: 198,
  actualBoundingBoxAscent: 33,
  actualBoundingBoxDescent: 1,
  actualBoundingBoxLeft: 0,
  actualBoundingBoxRight: 198,
  fontBoundingBoxAscent: 43.75,
  fontBoundingBoxDescent: 13.600000381469727
}

[andykais]

if this looks like a real issue I can create a separate issue or change the title on this one

[andykais]

Here are some repros. First a jsfiddle which correctly measures the width of text:
https://jsfiddle.net/8dk71toq/2/

and second, deno-canvas incorrectly measuring the same text:

import { createCanvas } from 'https://deno.land/x/canvas@v1.3.0/mod.ts'

const canvas = createCanvas(500, 200)
const context = canvas.getContext('2d')

function draw_text(text: string, x: number, y: number) {
  const metrics = context.measureText(text)
  console.log(metrics)
  context.fillStyle = 'red'
  context.fillRect(
    x,
    y,
    metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight,
    metrics.fontBoundingBoxAscent,
  )

  context.fillStyle = 'black'
  context.fillText(
    text,
    x + metrics.actualBoundingBoxLeft,
    y + metrics.fontBoundingBoxAscent,
  )
}

context.fillStyle = 'white'
context.fillRect(0, 0, canvas.width, canvas.height)
const font_buffer = await Deno.readFile('./fonts/tangerine/Tangerine-Regular.ttf')
canvas.loadFont(font_buffer, {family: 'Tangerine'})
context.font = '50px Tangerine'
draw_text("Hello World", 50, 50)
await Deno.writeFile('canvas.png', canvas.toBuffer())

both examples use this font https://fonts.google.com/specimen/Tangerine?query=tangerine

[andykais]

some further debugging shows that the builtin font (monospace in the case of my mac) correctly measures the text. 50px monospace is shown below.

loading a different font and specifying it via context.font does produce different measurements, so its clear that canvaskit is reading the new font. It just doesnt quite interpret the sizes correctly. Is this an issue I should move upstream to canvaskit?

[DjDeveloperr]

All values in TextMetrics except width were added with a hacky workaround, so they might not be right. And no, actual canvaskit does not even implement measureText as they just say to use Paragraph API instead. So this is a issue in deno-canvas only.

[andykais]

Got it. Well it is unfortunate that measuring text can't be done with deno canvas. I wanted to build out text captions with borders. I suppose there's an extremely hacky workaround for me where I dump the image data and find the max & min x & y

[DjDeveloperr]

Right.. text rendering as a whole is not-so-good with canvaskit-wasm. Btw, deno-canvas does expose Skia related APIs, such as Paragraph API if that's any helpful for you. I plan on porting Node.js skia-canvas using Deno FFI, if that works out we'd have a more performant and compatible canvas API. Though can't say for sure it'll be a thing, or anytime soon as FFI is limited a lot right now.

[andykais]

It would definitely be cool to see an ffi bridge to skia. For what I need though, if the paragraph api is exposed that would probably get me everything I need. Would you mind showing an example of how to use it in deno canvas (I have seen canvaskits docs but I'm not sure it's the same api here)

[DjDeveloperr]

Skia related APIs are all exposed in a namespace that is default exported from mod.ts.

import Skia from "https://deno.land/x/canvas@v1.3.0/mod.ts";

// Use Skia.Paragraph, Skia.ParagraphBuilder, etc.
// API should be same as canvaskit.

Under the hood, canvaskit polyills HTML Canvas using Skia WASM API. If you don't mind, I'd appreciate a PR to polyfill measureText properly using Paragraph API.

[andykais]

@DjDeveloperr could you give me a primer on contributing to this library? Would it be this file https://github.com/DjDeveloperr/deno-canvas/blob/master/src/lib.js#L2750? Its hard to tell if this is a source file because some of this code looks minified. Could you show where another skia specific method is used as an example?