Javascript – Coding for the long view

Konva – trap an image in a framing shape

So you have a space where the user is allowed to upload an image. You need to let the user position the image but you need to clip off any overflow. Here’s an approach…

Konva – HTML5 canvas blur & spotlight effect

Based on the learnings from my clip regions with holes article I thought I would cover how to make a spotlight effect since it has been asked for a few times on the discord channel. here we go…

Konva – Clip Regions with Holes

Making clip regions with holes can be confusing. I grabbed this simple example by user @Balage1551 from the Konva discord as I thought it was a great example.

Konva – Rotating a rectangle to cover another

In an earlier post I covered how to rotate a shape around any point on the canvas without using offset. In this post I’ll look at how to rotate and scale a rectangle so that it entirely covers the space it occupied before rotation. This is useful if you ever have to rotate an imageContinue reading “Konva – Rotating a rectangle to cover another”

Konva – HTML5 canvas synchronisation, part 2, peer-to-peer

In part 2 of my hacking a way to synchronise HTML5 canvases across browser windows, I’m taking the results from part 1 and making them work between browser windows via communications lib PeerJS.

Konva – HTML5 canvas synchronisation, 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 “Konva – HTML5 canvas synchronisation, part 1”

Konva – Zooming the stage under the mouse

When you start zooming with Konva you pretty quickly get frustrated about how to zoom relative to the mouse position and not the top-left corner of the stage. Here’s how to do that.

Konva – Capture canvas animation to GIF in the browser

I’ve seen a number of questions regarding how to save an HTML5 canvas animation as an animated GIF. So, lets have at it…

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…

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”