Marty McGuire

Posts Tagged canvas

2011
Mon Feb 21

Thing-a-Day 2011 #21 - Auto-scaling Hershey fonts in JavaScript

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Ok, this is kind of fun, even though the code is very naive.

I've added a height-check at the end of my line-breaking code. If there are too many lines of text to fit within the allowed space, the algorithm will rescale everything and try again:

Screenshot of web app with text area and rendered text in Hershey script font. There are many lines of text, and the font has been downsized to fit more text. It's a lot of filler text that I won't repeat here.
This isn't great for real-time text flow, but it is fine for fitting text, I think.
Sun Feb 20

Thing-a-Day 2011 #20 - Hershey fonts in JavaScript on the canvas

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I haven't been making as much progress on my "draw things in the browser so a robot can draw them on the Unicorn" project, so I decided to take a stab at cleaning things up a little to make that easier.

Today I rewrote my little demo to use canvas 2D instead of Raphael.js.  It looks the same, for the most part:

Screenshot of web interface with text area and rendered text in Hershey script font. Text reads: Hmm. Oh, this is better. I wonder if it slows down all crazy? I guess not! That is awesome. Feeling pretty good about this whole canvas thing. It's almost good enough for real-time typing. Yeah!
But being in canvas land instead of Raphael land means I can do real stacked transforms easily, without having to keep track of them myself. For instance: ROTATION!

Screenshot of web interface with text area and rendered text in Hershey font. The text is tilted to the right at an angle. It reads: Woah! This is crazy!