Blog Articles

HTML5 canvas synchronisation with Konva, part 1

Interactive whiteboard apps seem to be a popular use-case vector for the HTML5 canvas. I’m a fan of the Konva JavaScript 2d canvas library so I wondered what it would take to synchronise canvases. Design thoughts My end goal is a meeting or classroom-style whiteboard where there could be multiple users sharing and co-operating onContinue reading “HTML5 canvas synchronisation with Konva, part 1”


Support me not

A few thoughts for folks who might be new to the support role. Acknowledge early, be straight & factual, and sign your work.

The trouble with npm-install…

Boss to developer at 5pm Friday: “That proof-of-concept you knocked up last week for the sales team web dashboard ? We’ve promised the full-blown version to the users by next week – you’re good with that, right?”

Konva Group – useful but spooky

The Konva group is a bit hard to pin-down, almost a normal shape but not quite. Its super-powers can be a bit challenging though once you understand a few fundamentals its got your back. Lets dive in…

A Require for ClearScript

ClearScript is the C# scripting engine that can execute JavaScript inside a C# context. It’s way smarter than that description suggests. But it does not provide a require (think ‘code module loader’) capability. So how about we make one…

Metadata-driven FUI forms layout (responsive)

Working on a project where metadata defines a varying number of text inputs to display on a form, where the inputs must have a fixed width, and which must be responsive. Thought it would be simple with FUI’s form-field-input stack – but nope – and here’s why and my grid-based solution.

Animation for HTML5 canvas with Konva

I wanted to learn about animation on the canvas so I’m making a smooth spiral animation of the first 199 words or David Bowie’s ‘Space Oddity’ using the excellent Konva canvas library and its animation feature.

Scrollbars around an HTML5 canvas

A quick post on how to get the browser to scroll the stage. The simple solution is to draw the stage full size and place it inside a smaller div. The key here is that the div that contains the canvas has a specified width & height, and also overflow-scroll. And here is the result.


Something went wrong. Please refresh the page and/or try again.

Follow My Blog

Get new content delivered directly to your inbox.

%d bloggers like this: