How I can do to add an image to the canvas but simultaneously distorting it from different points using canvas?
Asked
Active
Viewed 994 times
1
-
1Canvas 2D will need a javascript function to do that, or WebGL can do it in hardware. – Blindman67 May 27 '16 at 16:38
-
Your question is too broad to be a good fit for Stackoverflow's shortform Q&A format. As a starting point, here is a good post by Kenn Knowles on how to distort a rectangular shape by [mapping into triangles](https://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/). You will need to adapt the triangles to approximate your curve. And a Blindman67 says, you can use WebGL to make 3d transformations easier. – markE May 27 '16 at 19:43
-
You can use **[this SO answer](http://stackoverflow.com/a/36381584/16935939)** and modify it to support sub-divided cells with shared edges. Work on low resolution and render final at best (it should really have used opposite projection, but will do for most cases I believe). WebGL is better for performance though. – May 27 '16 at 22:36