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!
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!
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.
Demonstration of the effect of timing functions on an animation, using a Bezier curve controller. How to use: Drag the handles (green dots) of the control below to adjust the way the red dot runs its loop. It starts and ends in its ‘home’, but the speed may vary, and the dot may even temporarily […]
How to intersect a parabola with a line, and other graphics solutions.