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.
Tag Archives: Javascript
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”
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…
HTML5 Canvas text on a path with Konva
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 “HTML5 Canvas text on a path with Konva”
HTML5 Canvas bottoms-up with Konva
Or, how to get the Y-axis to go bottom-up when the normal situation is for it to increase from the top-down. While we are at it, we’ll develop the bones of a plotting class. I’ll be developing my code with the use of the Konva JS canvas library which is a wrapper for the HTML5Continue reading “HTML5 Canvas bottoms-up with Konva”
Konva – using a shape’s transform to rotate points
The Konva HTML5 canvas lib has a very useful feature that can spit out the transform applied to a shape, and which we can borrow to rotate points without math. Th example below illustrates the use of rect’s transform to position the corner circles. Codepen here. What is a transform ? I couldn’t find aContinue reading “Konva – using a shape’s transform to rotate points”
Konva offscreen / ghost canvas
I had always created Konva stages by setting the container parameter to the selector of an existing HTML DIV element. Then I needed to create an image from canvas elements as a one-off which I would then draw into the main stage. So how to do that without having a physical, in-the-DOM container DIV? LookingContinue reading “Konva offscreen / ghost canvas”
Developing an HTML5 canvas app ? Why you should use a model
This is aimed at folks who are starting out writing apps that use the HTML5 canvas using JavaScript. There are many JavaScript canvas libs around to help you write visual apps and increase your overall productivity. This article is generic and about your planning of your app rather than being related to any one lib,Continue reading “Developing an HTML5 canvas app ? Why you should use a model”
