I Made an NPM Package to Render text on HTML5 Canvas

Publish Date: Apr 26 '20

31 9

Rendering text onto HTML5 Canvases has always been a hassle for me.

The Problem

There was no proper way to align text, to wrap words if it overflows and even to properly position text without knowing the contents of the text.

Larger packages had this feature but I didn't wanna import a whole canvas library just to render some text.

I made a library called Canvas-Txt, which will let you render textboxes to html canvases and has all sorts of aligning and multi-line features

I created this for myself and it grew with some community help. This package was released to NPM and has some weekly downloads now.

I added some major changes and just released V2 of this.

Features

Github: https://github.com/geongeorge/canvas-txt

Demo: http://canvas-txt.geongeorge.com/

Comments 9 total

JWPApr 26, 2020
Was creating npm packages difficult?Any tips?
- Geon GeorgeApr 26, 2020
  Not really.
  I forgot which one I used but there are many boilerplates.
  Or just clone my repo and just change the js file.(for smaller plugins)
Adam Crockett 🌀Apr 26, 2020
Is this for gl contexts?
- Geon GeorgeApr 27, 2020
  I have very little idea about Web Gl, but this should work on any canvas which allows you to draw a line on it.
Sergey LukinApr 27, 2020
Looks great! How do yo maintain your demo page? Is demo's repo public? I'd love to learn from it.
- Geon GeorgeApr 27, 2020
  I made it with vue and buefy.
  It was private. I made it public for you ;) . Here you go: github.com/geongeorge/Canvas-txt-d...
  - Sergey LukinApr 28, 2020
    You are the man! Thank you
Baris Can CeylanApr 27, 2020
Congrats, nice little package!
One improvement I can think of is making it responsive, perhaps props for different breakpoints.

As a note: Keep in mind that text in canvas (or anything in canvas really) is not accessible. It's always best to use semantic html where you can to provide contextual data & better accessibility.
- Geon GeorgeApr 27, 2020
  Thank you!
  I used to have a solution where you drop in '\n' to add a custom breakpoint.
  This could be added in a future version.

Add comment