DEV Community: Geon George

Canvas-Txt: Multiline Text Magic on HTML5 Canvas

Geon George — Fri, 03 Nov 2023 17:55:06 +0000

As developers, we've often been in situations where we need to render text on a canvas element in HTML5. It could be for a game, a custom chart, or even an advanced animation. But, anyone who's tried this knows that the native canvas API is... a bit limited when it comes to handling text. Enter Canvas-Txt 📐✨, a minuscule, dependency-free library that transforms how we draw text on HTML5 canvas.

What's Canvas-txt?

Canvas-Txt extends the native canvas text rendering capabilities with a set of much-needed features:

Multiline Text: Easily render paragraphs.
Auto Line Breaks: No more manual calculation for breaking lines.
Text Alignment: Supports horizontal, vertical, and even justify alignment.
Debugging Tools: Comes with visual aids to help place your text exactly where you want it.
Performance: It's built for speed, so no more trade-offs between functionality and performance.

See It in Action

Before we dive into the code, take a peek at the live demo here to see what you'll be capable of after this tutorial.

Setting Up

First things first, let's add Canvas-Txt to your project:

yarn add canvas-txt

# Or with npm
npm i canvas-txt

The Basics: Drawing Text

Here's the simplest example to get you started. Add a canvas element to your HTML:

<canvas id="myCanvas" width="500" height="500"></canvas>

Now, let's draw some text on it using Canvas-Txt:

import { drawText } from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

ctx.clearRect(0, 0, 500, 500)

const txt = 'Lorem ipsum dolor sit amet'

const { height } = drawText(ctx, txt, {
  x: 100,
  y: 200,
  width: 200,
  height: 200,
  fontSize: 24,
})

console.log(`Total height = ${height}`)

When you run this code, you’ll see "Lorem ipsum dolor sit amet" beautifully rendered on the canvas, enclosed in a 200x200px box starting from position (100,200).

Using Canvas-Txt on the Server with Node.js

If you're working in a Node.js environment, you can use Canvas-Txt with node-canvas:

const { createCanvas } = require('canvas')
const { drawText } = require('canvas-txt')
const fs = require('fs')

function main() {
  const canvas = createCanvas(400, 400)
  const ctx = canvas.getContext('2d')
  const txt = 'Hello World!'

  const { height } = drawText(ctx, txt, {
    x: 100,
    y: 200,
    width: 200,
    height: 200,
    fontSize: 24,
  })

  const buffer = canvas.toBuffer('image/png')
  fs.writeFileSync('output.png', buffer)
  console.log(`Total height = ${height}`)
}

main()

With this setup, you can generate images on the server side that include dynamic text content.

Conclusion

And there you have it! Canvas-Txt is a powerful and easy-to-use solution for all your canvas text rendering needs. Whether you’re working on a dynamic web application or generating images on the server side, Canvas-Txt simplifies the process, giving you the ability to focus on creating a great user experience rather than wrestling with text metrics.

To dive even deeper and to learn more about the customization options available, be sure to check out the official Canvas-Txt documentation. With this tool in your development arsenal, you're well-equipped to make your canvas text renderings as simple or sophisticated as your project requires.

Happy coding, and may your text always align perfectly on your canvas!

Multiline Text in HTML Canvas

Geon George — Fri, 14 Jul 2023 17:53:42 +0000

I've recently given a facelift to Canvas-Txt, a project that I initially launched some moons ago. For those not in the know, Canvas-Txt is a teensy-weensy library that does one job, and one job only - render multiline text on your HTML5 Canvas, without hanging on the coattails of any dependencies.

Now, let me show you

https://github.com/geongeorge/Canvas-Txt

Demo

To give you an idea, let me walk you through a simple use-case scenario:

First, install Canvas Txt either via yarn or npm:

yarn add canvas-txt

or

npm i canvas-txt

<canvas id="myCanvas" width="500" height="500"></canvas>

import { drawText } from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

ctx.clearRect(0, 0, 500, 500)

const txt = 'Lorem ipsum dolor sit amet'

const { height } = drawText(ctx, txt, {
  x: 100,
  y: 200,
  width: 200,
  height: 200,
  fontSize: 24,
})

console.log(`Total height = ${height}`)

And there you have it. Your multiline text, neatly rendered on an HTML canvas.

What's even cooler is that you can do this in Node too! Just have a look at the Node js demo here https://github.com/geongeorge/Canvas-Txt/blob/master/src/node-test.ts

Summing Up

That's pretty much it. With Canvas Txt v4, I've aimed to simplify your journey of handling multiline text in HTML canvas.

Whether you're just dabbling in canvas or are an experienced pro, I hope you'll find Canvas Txt useful.

As always, if you have any suggestions, comments, or just want to give a shout out, hit me up on my Twitter!

My open-source project hit 2k stars

Geon George — Thu, 02 Jul 2020 13:00:23 +0000

Okay, before you go ahead and look: I lied

Let me explain :)

https://iHateRegex.io/ is a project I launched in February this year.
It is basically a regular expression cheat sheet with neat visualizations and explanations for common expressions.

As of writing this article, it has 1,987 stars on GitHub. And it is only a matter of a few hours to reach 2,000:

https://github.com/geongeorge/i-hate-regex/

In my defense, Github did round that number to 2k anyway.

I'm super stoked about this🔥.

But that is not the only reason why I'm writing this article.

(Sorry about the long content. I didn't want to add gifs or unwanted images here)

Some Context

I started working on this in August 2019. This took around half a year to complete.

Now, this might look like a very simple application from outside and I'm not arguing. It is in fact very easy to create.

At the time I had no idea what I was creating. I had no clue what I was aiming for. I had college in the morning and I worked as a freelance developer at night. Also had a few products for which I provided support.

And here I was with a domain - ihateregex.io hoping to make a regular expression cheat sheet with.

To be honest, I didn't even know what I should include, how to present this, and had 100s of questions like this.

Halfway through making this I remember writing this in my blog:

I spend a lot of time on this. But as I was nearing the launch, my old pal Imposter Syndrome kicked in. I felt it wasn’t worth my effort and that I’m gonna be made fun of because of how useless it is. - from my blog

I felt like an imposter, I'm not a regular expression expert myself, People would make fun of how stupid the domain was.

One month had passed after writing the above blog.

One day, mustering up some courage I just decided to release this on product hunt.

The Launch

Here I was, hunting my first product in product hunt. I asked a few friends for advice and decided to press the submit button. I shared this with a few friends and told them to try this product.

PEOPLE LOVED IT!

I was getting upvotes left and right.
This was getting shared everywhere.
I posted this on hacker news and I woke up the next day to see it's already #3 on hacker news.
This ended up becoming the number #2 Product of the day on product hunt.

I shared this on Dev.to and people started buying me coffee and got lots of amazing feedback :)

I even got sponsorship from the amazing people at Datree

Today

Skip to today and the product has (almost) 2k stars on Github.
People are submitting expressions, many have bookmarked this as their goto regex tool.

If you have something in your mind just make it. Give to the world the things you make and you never know what will happen.
The problem (I think) is we all try to predict the future. With all our biases and fears we end up choosing the path more traveled. the safe path. And if that is a good or bad choice is up to you.

Make sure to give me a follow on twitter.

I tweet about my journey as a maker:

https://twitter.com/geongeorgek/

Thank you for reading :)

Lazy Load Images in 2 seconds

Geon George — Fri, 05 Jun 2020 12:09:33 +0000

The Story

I have this internal tool for some purpose. Now, this has a page where it displays like 50+ images grid in smaller sizes.
The page always load very slow and I hated it.

So We can solve this by properly generating smaller thumbnails of the images and/or lazy loading the images.

This isn't really isn't used by anyone else other than me. So I decided to skip the thumbnail part and add 2 lines of js to lazy load the hack out of these stupid images.

Then I stumbled upon something I completely forgot that existed.

loading="lazy"

<img src="..." loading="lazy" />

That's pretty much everything you need to make your images lazy load.

Now this is an HTML5 Feature and probably might not be supported by every browser out there.
It might not bring fancy animations and fade transitions onto the table

But IT WORKS!!

The previous webpage is atleast 3 times as fast.

TL;DR

Use the loading attribute in HTML

<img src="..." loading="lazy" />

Update

You definitely should not use it in anything important.
You need a polyfill to get it work on all browsers.
Read my story and see why I used it.

I Made an NPM Package to Render text on HTML5 Canvas

Geon George — Sun, 26 Apr 2020 05:09:25 +0000

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.

Enter Canvas-Txt

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

Multiline text
Auto line breaks
Horizontal Align
Vertical Align
Easy Debugging

URLs

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

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

Looking for contributors for iHateRegex.io <3

Geon George — Sat, 01 Feb 2020 17:08:13 +0000

This community made me to launch iHateRegex.io in product hunt and hacker news. 🙏

it turned out really well:

topped a lot of subreddits.
#3 on hacker news 😮
#2 on product hunt 😍
a lot of retweets on Twitter
100s of bookmarks

I did a lot of updates in the last few hours.

It seems to be gaining small traction on GitHub as well,

I'm inviting anybody who would like to contribute to this amazing project:
😻👉
https://github.com/geongeorge/i-hate-regex/

The project is build using Nuxt.js (based on Vue.js)
It runs entirely on Javascript (Server-side Rendering)

Launched iHateregex.io in Producthunt

Geon George — Fri, 31 Jan 2020 09:00:16 +0000

I just launched iHateRegex on product hunt:
👉👉
https://www.producthunt.com/posts/i-hate-regex
❤
Thanks to everyone in this community who motivated me to do this

See my previous post about the tool: https://dev.to/geongeorge/i-hated-regex-so-much-that-i-made-ihateregex-io-1ih4

I hated Regex so much that I made iHateRegex.io

Geon George — Fri, 31 Jan 2020 04:10:40 +0000

In years of being a developer I never really spent the time to learn regular expressions. It always seemed like a hard nut to crack.

I used to spend so much time trying to find regular expressions for my use case.

now you have two problems

Enter iHateRegex.io

https://iHateRegex.io

I made a simple tool that will explain to you commonly used regular expressions work.

It is a simple tool that will show a visual graph as well as matches and highlighting for code.

Hope you like the tool :D

Tech

Public Repo: https://github.com/geongeorge/i-hate-regex

The application is built using:

The awesome Nuxt.js framework
Tailwind.css
for the visual demo I used: https://gitlab.com/javallone/regexper-static

Update

Thank you for all the love and support guys 💓 Posting this has given me enough motivation to work on this more.
The application is just an MVP right now. With the support of everyone, I can make this into a great project for beginners.
I'm also working on tutorial pages to get started on regex. here's a sample

Producthunt launch

I just launched iHateRegex on Producthunt 😺

👉👉
https://www.producthunt.com/posts/i-hate-regex

Building a regex learn-by-examples web application

Geon George — Thu, 29 Aug 2019 01:12:24 +0000

I'm building a regex "commonly used" library which includes an explanation for each of the expressions.

I did not find a good alternative other than this ancient-looking website: http://regexlib.com/

Dumb me did not realize until the halfway completion of the application that there are multiple flavors for regex.
I can only show examples and process js expressions. Should I ditch the idea? or complete it even if it's shitty?