Changes to canvas-txt API

[geongeorge]

Up until now, we have a canvasTxt object with props and methods you can invoke. This to me is a bad pattern. I built this a while back and it fitted my need perfectly back then. But as the library is evolving and others are using it, I feel it is necessary to follow a better pattern.

I can think of 2 different ways we can use canvas-txt:

1. Individual function export

This will look a lot like this

import { drawText } from 'canvas-txt'

const config = {
  width: 200,
  height: 200,
  x: 200,
  y: 200,
  vAlign: 'middle',
  align: 'center',
  debug: true
}

drawText(ctx, txt, config)

2. Class

This will look something like

import CanvasTxt from 'canvas-txt'

const ct = new CanvasTxt({
  vAlign: 'middle',
  align: 'center',
  debug: true
})


ct.drawText(ctx, txt, {
  width: 200,
  height: 200})
  
 ct.align = 'left'
 // Or a setter
 ct.setAlign('left')

I personally prefer the function approach, but the class might end up useful for some use cases. I would love if anyone has any suggestions or if there's a different approach we can go with.

[PoeHaH]

To me, a function is a single action while a class is a collection of multiple actions.

So in its current form, I also prefer the function approach. It doesn't overcomplicates things.

However, if you're planning on expanding the library with other canvas-related tasks , such as adding images on a canvas or whatever else you want, then it would make sense to go the class approach.

My vote for now is the function approach :).

[jassmith]

I think the function approach is also superior for your users. The only advantage I see to the class approach potentially is if you can somehow use internal state to make things faster, however I can't really think of a good way to do that. The class is just overhead for you. The function could be trivially wrapped into a class by anyone who needs that form of API.

[geongeorge]

Thank you @PoeHaH and @jassmith for your quick reply, I'll go ahead with the function approach :)

[mgambati]

The functional approach looks awesome.

One feature request (I may try to implement it too) is the text-overflow behaviors from CSS.: ellipsis and clip. How hard would that be to implement?

[jassmith]

I've implemented those in custom codebases. They are possible to implement but come with significant performance overhead. They are also imperfect due to hinting/kerning against the … character being somewhat unpredictable. The character may kern enough against the lead out character that you could actually have fit the next char as well, but that's probably not a big issue.

[geongeorge]

Thank you for your feedback everyone, it only took me an eternity but I'm ready with this now: #76

import { drawText, splitText, getTextHeight } from 'canvas-txt'

[geongeorge]

New version published https://www.npmjs.com/package/canvas-txt 🎉