codepo8/canvasshift.js

A helper function to shift images on a canvas to allow for image tiling and conversion.

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.

• Simple shift Test is a bare-bones example.
• Shift Test is the testing page I used to debug the script.

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.