How to make an image transformation in the form of an arc in js?

Question

JavaScript

Good day.
There was such a problem - you need to make the transformation of the image in the form of an arc on js, something like this should come out:

Maybe there are some libraries, ready-made solutions, or in which direction to dig?
Thanks in advance.

Answer 1

In general , I wrote it on the basis of a quadratic bezier curve.
But ideally, you still need to write anti-aliasing. The canvas data-offset attribute specifies how strong the rounding is , data-url is a link to the image .
Well, the most important problem, in order to work with images,
uncomment the line //ctx.drawImage(img,0,0,ctxW,ctxH - offset);and comment out The link that will be in the data-url must be on the same host as the script! That is, if the link to the site is localhost/page.php, then the link to the image is localhost/.../name.jpg Or the link must be on the server with the Access-Control-Allow-Origin "*" parameter, otherwise the protection will work and throw an exception
Here is an example of deformation

Answer 2

Is that webGL to use. There is a library for working with this business three.js, where you can directly load a 3D model of a glass and sculpt anything on it)) And you can even turn the finished result))
Here, once I played with a teapot like that))