canvasshift.js

CanvasShift is a helper function that allows you to shift images on a canvas.

This means you can rotate the images in themselves and users can save the results as images, something CSS sadly enough can’t do.

The easiest way to test this is to check the demo pages.

Here’s a bare bones example:

<script src="canvasshift.js"></script>
<script>
    let c = document.createElement('canvas');
    let cx = c.getContext('2d');
    document.body.appendChild(c);
    let i = new Image();
    i.src = 'puking-unicorn.jpg';
    i.onload = function() {
      c.height = i.naturalHeight;
      c.width = i.naturalWidth;
      cx.drawImage(i, 0, 0);
      canvasshift(c, 100, 0);
    }
</script>

If you don’t want to do the loading of the image yourself, you can also use the load() method of canvasshift.js:

let c = document.createElement('canvas');
let button = document.querySelector('button');
button.appendChild(c);

const shift = _ => {
  canvasshift(c, -200);
}
canvasshift.load(c, 'puking-unicorn.jpg', shift);

button.addEventListener('click', e => {
  canvasshift(c, 100, 0);
  e.preventDefault();
});

More details are in this blog post.