text – Coding for the long view

Konva – what I learned building rtx – a rich text editor for HTML5 canvas

So I spent some time building a rich text editor as a side project. Here’s some of what I learned which I’m sharing so you can avoid the bear traps and subsequent pain! Lets take a look…

JavaScript – working with Emoji’s or the café problem

Working with non-English languages or emoji’s and finding that strings get garbled or just don’t add up? Let me try to explain why…

Konva – text with block background

Giving text a block color background with margin and padding is catered for well in CSS but not so easy in Konva where there is nothing as capable as CSS built-in. Here’s some code to give you that feature. TLDR: Here’s the demo CodePen… I should mention that Konva provides the ‘textBackgroundColor’ attribute, but thisContinue reading “Konva – text with block background”

Konva – Text what can it do?

I’m generally interested in text layout for couple of side projects so I’m keen to see what Konva can do for me with its Text object. I’m a fan of Konva, and I’m on a journey to understand it in as much depth as I can, and this is a step along the route. MyContinue reading “Konva – Text what can it do?”

Konva – HTML5 canvas text line height measurement

Take your protein pills and put your helmet on, strap yourselves in and hold on tight – we’re embarking on a rollercoaster ride to try and find a reliable, robust & repeatable approach to measuring line height on the HTML5 canvas. Am I trying too hard to sell this as exciting? There are two sectionsContinue reading “Konva – HTML5 canvas text line height measurement”

Konva – HTML5 Canvas text measuring

A quick run through of some of the principles of working with text and breaking away from relying on textOut and Text object from the Konva HTML5 canvas library. I’m assuming you’ll know enough JavaScript to follow along. For dealing with text in the context of the HTML5 canvas there are two points to beContinue reading “Konva – HTML5 Canvas text measuring”

Konva – HTML5 Canvas text on a path

The canvas does not yet provide the same level of character manipulation and measuring functions as we might find in the Windows GDI or similar. But it does give us canvas.measureText() to measure character size. Combine that with path.getPointAtLength() and we can fit text to a path. Measuring Text To have any chance to fitContinue reading “Konva – HTML5 Canvas text on a path”