how to skew image like this

by

You cannot achieve this with a single 2D transform.

A 2D transform allows you to skew the image “upwards” or “downwards” by passing the tangent of the skew angle in the second argument to setTransform(), but you want to perform both in a symmetrical manner (resulting in a “nearwards” and/or “farwards” deformation). You need a 3D transform to do that.

However, you can emulate the same result by slicing the image into several horizontal “bands” and applying a different transform when rendering each band. Bands further from the half of the image will be applied stronger skew angles. Something like:

var width = image.width,
    height = image.height,
    context = $("canvas")[0].getContext("2d");
for (var i = 0; i <= height / 2; ++i) {
    context.setTransform(1, -0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 - i, width, 2,
        0, height / 2 - i, width, 2);
    context.setTransform(1, 0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 + i, width, 2,
        0, height / 2 + i, width, 2);
}

Note the bands are two pixels high instead of one to avoid a moire effect.

You can see the results in this fiddle.

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. Why does canvas.toDataURL() throw a security exception?
  5. Zoom Canvas to Mouse Cursor
  6. CanvasContext2D drawImage() issue [onload and CORS]
  7. Zoom in on a point (using scale and translate)
  8. how to save canvas as png image?
  9. Canvas toDataURL() returns blank image
  10. HTML5 Canvas camera/viewport – how to actually do it?
  11. How to resize html canvas element?
  12. How do I rotate a single object on an html 5 canvas?
  13. Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) [closed]
  14. Detect if user clicks inside a circle
  15. addEventListener for keydown on Canvas
  16. How can I animate a progressive drawing of svg path?
  17. How to determine the intended frame-rate on an html video element
  18. Saving canvas to image via canvas.toDataURL results in black rectangle
  19. Canvas Draw Image issue on firefox, works well in chrome
  20. Resize a Base-64 image in JavaScript without using canvas
  21. How to save canvas animation as gif or webm?
  22. clearRect not working
  23. Force showing the “Save as” dialog box when downloading a file
  24. canvas getContext(“2d”) returns null
  25. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  26. Why does my canvas go blank after converting to image?
  27. Body animation isn’t smooth
  28. How can I animate the drawing of text on a web page?
  29. Extracting single frames from an animated GIF to canvas
  30. Get distance between two points in canvas

Leave a Comment