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.
I’ve seen a number of questions regarding how to save an HTML5 canvas animation as an animated GIF. So, lets have at it…
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.
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?”
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 “HTML5 canvas text line height measurement”
When trying to squeeze every last morsel of optimisation out of a canvas app, we need to be concerned about NOT drawing anything we don’t need to. This means anything that the user cannot possibly see should not be drawn. I’ll be showing how to know a node is offscreen using the Konva HTML5 canvasContinue reading “HTML5 Canvas viewport optimisation with Konva”
This is something I made for fun when I was learning about Konva tweens and animation, and posted as a self-answered question on StackOverflow. The coin spin effect is done by scaling the X axis of the circle from 1 to 0 to 1 in a loop. The human brain is defeated by the simpleContinue reading “HTML5 canvas coin spin effect with Konva”
This is from a StackOverflow answer I made in response to a request for a way to show a route on a map with bends. In essence this is manipulation of the points array for a Konva Line object. The user selects a point via a mouse click and that point goes into the pointsContinue reading “HTML5 canvas manual route drawing solution with Konva”
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.
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”
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”
So you have a shape with some transforms applied – you need to apply the same transforms to another shape. How do you do that ? It turns out that Konva gives us a simple means to accomplish the challenge. We can get the first shapes transform with the shape.getTransform() method, then with a littleContinue reading “Konva shape transform sharing is simple”
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”
Something went wrong. Please refresh the page and/or try again.
Follow My Blog
Get new content delivered directly to your inbox.