Daniel Harrison's Personal Blog

Personal blog for daniel harrison

Ruling canvas out for text editing March 30, 2010

Filed under: Uncategorized — danielharrison @ 9:23 pm

Wrote a quick prototype using canvas as a text editor but have now abandoned it in favour of a contenteditable block with canvas overlays.

The problem for non fixed width fonts is that there’s no way of measuring where each character starts and ends. Due to kerning, aliasing etc. eg {measureText(and again) != measuretext(an) + measureText(d again)} which would be expected. But there’s no way of getting the character offsets of ctx.fillText call. I wrote a quick and dirty manual measure by getting the canvas as an image and finding the start and end pixel of characters but it felt like too much work and contenteditable was just there.

The thing stopping me using contenteditable in the first place was obtaining the screen co-ordinates for the selection is not possible at the moment as far as I can tell. IE has boundingWidth … but firefox or the w3c std doesn’t seem to support this. I’m interested in word selection, not multiparagraphs. As a workaround I clone the contents, surround the word with a div and calculate it’s location and then replace with the original content again, reselecting the original selection. Seems to work ok in both firefox and webkit browsers.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s