Canvas How to - Shear image in animation

Question

We would like to know how to shear image in animation.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){<!--from  w  w w  .  j a  va  2s  . com-->
$(function () {
  var
    loaded = false,
    ctx = $('canvas')[0].getContext('2d'),
    img;
  img = $('<img>', {
    src: 'http://www.java2s.com/style/download.png'
  }).on('load', function () {
    loaded = true;
  }).get(0);
  setInterval(function () {
    var f = 0;
    return function () {
      if (loaded) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.save();
        ctx.setTransform (1, f, 0, 1, 0, 0);
        ctx.drawImage(img, 50, 50);
        ctx.restore();
        f += 0.01;
        if (f > 1) {
          f = 0;
        }
      }
    };
  }(), 16);
});
});//]]>  
</script>
</head>
<body>
  <canvas width="500" height="500" />
</body>
</html>

The code above is rendered as follows: