Categories
JavaScript Web development

Magnify images with a draggable loupe

In a previous post we’ve seen how to create a magnifying glass effect with canvas. But the position of the lens was static, and of course in a useful application a user must be able to move the lens to a point of interest. Let’s make aVue component for that!

Categories
JavaScript Web development

Creating a magnifying glass with html5 canvas

It is surprisingly easy to manipulate images in the browser using the html5 element canvas. For instance, we can cut out part of the image and paste it back at another positon, in the mean time changing the shape or color of it. And it doesn’t have to be rectangles only!

Categories
JavaScript Web development

Fun with canvas transforms

Making use of coordinate system transformations can make drawing on the html5 element canvas much easier. But sometimes it is confusing how transforms work. What is it that is actually transformed? Let’s clear that up and see how to use it.

Categories
Web development

SVG sprites transforms

Investigation if working with SVG sprites is practical. Especially in combination with transforms.

Categories
Web development

Drag hiccups

Workaround of a rare bug I found with gsap’s Draggable and Wacom Intuos tablets on Windows 10

Categories
Web development

Looping video with autoplay

Looping a video with autoplay. Either with YouTube or html5 video tag

Categories
JavaScript Web development

Bishops Swap Game

The Bishops Swap Game is a classic puzzle from the 7th Guest. Here is the start position of it: The end position is the same, except that the black and white bishops have swapped: the black bishops are on the top row, the white bishops are on the bottom row. Move the bishops to get […]

Categories
Gutenberg Wordpress

Match editor style to front-end

If you create a theme for WordPress, you will probably want the front-end and the back-end (the editor) look alike in most cases. It’s not that hard if you know how to do it. wp_enqueue_style You could use the enqueue_block_editor_assets hook to add styles, using wp_enqueue_style. This is how the twentytwenty theme does it. It […]

Categories
Animation JavaScript Web development

Move eased dot along a curve

In the Bezier curve, perceived as a graph, the horizontal axis shows the time passed, on a scale of zero (at the start) to one (at the end point). The vertical axis shows the progress in distance covered, also from zero (no progress) to one (loop completed), although progress can dive below zero or exceed […]

Categories
Animation JavaScript

Move a dot along a path

Create a dot moving along a path using SVG and JavaScript