0

Is it possible to draw an image to an arbitrary quadrilateral in the canvas 2d API?

I see drawImage lets me draw to a rectangle.

ctx.drawImage(someImage, x, y, width, height);

and rotate lets me rotate it.

ctx.rotate(angle);
ctx.drawImage(someImage, ...);

But is it possible to choose an arbitrary 4 points to map the original 4 points of the image rectangle too?

drawImageTo4Points(
  image,
  topLeftX, topLeftY,          // location to place the topLeft of the image
  topRightX, topRightY,        // location to place the topRight of the image
  bottomLeftX, bottomLeftY,    // location to place the bottomLeft of the image
  bottomRightX, bottomRightY); // location to place the bottomRight of the image
CCTester
  • 1
  • It's possible to map a rectangular image to an arbitrary parallelogram, but the only ways I know of to map it to any other quadrilateral would require using a loop to draw pixels or stripes. – supercat Feb 15 '21 at 03:47
  • Does this answer your question? [how to skew image like this](https://stackoverflow.com/questions/10426887/how-to-skew-image-like-this) – Kaiido Feb 18 '21 at 02:13

0 Answers0