How to applying curvy transformation to HTML canvas

Question

The linear transform scales the space and html canvas's setTransform function shears and moves the space. Is there any way to apply curvy transformation to canvas?

Answer 1

It's possible with plain canvas and with webgl canvas. (You just need some math)

Math genius Rull Deef 🐺 code examples:
plain js:
https://code.sololearn.com/Wx4yblest1ed/?ref=app

https://code.sololearn.com/WX442ZYnQBmS/?ref=app

https://code.sololearn.com/WUe9MOhfTFhb/?ref=app

webgl:
https://code.sololearn.com/W3e4O44DgY0Y/?ref=app

Answer 2

No, you can't use the HTML5 canvas's transform for non-linear transformations. The transform is for linear transforms and nothing more.

If you want to distort graphics for effects like heat waves, you'll need an alternative. You could do something like draw to a hidden/offscreen canvas and draw the image pixel by pixel through a pixel array buffer. Let's say you wanted to add 10 * sin(x) to the y-coordinate of every source pixel. You could then perform that change by copying from a different source pixel as you copy pixels. It is little messy and inefficient but I can't think of a better way. If performance was critical and this JavaScript array buffer loop became a bottleneck, you could use a WebGL shader to draw your distortion using compiled GPU-optimized machine code.

If what you're curving is just lines, you could use the supported curve drawing methods. arc, quadraticCurveTo, bezierCurveTo...

Answer 3

Thanks Josh Greig Mirielle[ InAcTiVe ] and Haris for answers.

Answer 4

Hey Roopesh,

I totally get where you're coming from. Transformations on HTML canvas can sometimes feel limited when it comes to creating those beautiful, curvy transformations. But fear not, there's a way to achieve those curvy wonders!

You can dive into the world of bezier curves and quadratic curves. These curves, especially quadratic Bezier curves, allow you to create all sorts of smooth, curvy transformations on the canvas. They're like the artistic brushes of the canvas world. Look at the results: https://www.slashtechnik.de/digitale-transformation-in-unternehmen-was-bringt-sie/

Start by defining your control points and endpoints for the curve, and then use the quadraticCurveTo or bezierCurveTo methods to draw your desired curves. It might take a bit of experimentation to get the hang of it, but trust me, the results can be breathtaking.

My experience with this technique has been quite enjoyable. I've used it to create dynamic, curvy animations and interactive elements on websites. It's a bit like painting with code!