Search code examples
javascriptcanvashtml5-canvas

How to flip html canvas so that the canvas is really flipped?

I am not asking how to redraw the image flipped, which is what all the search results come up with. I want to actually rotate the canvas DATA 180 degrees. I copy the canvas to the clipboard using canvas.toBlob , so I need the actual blob of the canvas to be transformed, not just redrawn like most tutorials show.

I am making an inhouse fax viewer that copies the fax pages from a tiff file to the clipboard so they can be pasted into the right place in a different program but sometimes the faxes come in upside down. I use tiff.js to be able to page through the tiff images, each page get's it's own canvas, and then I use canvas.toBlob to put it in the clipboard but if I rotate the canvas on screen, it doesn't stay rotated when the blob is put into the clipboard.

Solution

  • As @Kaiido suggested you need to redraw the canvas. That does not mean though that you need to redo all the drawing operations you might have done - if that's what you're afraid of.

    Instead you can dynamically create an offscreen canvas the size of your main canvas, translate and rotate it accordingly, draw your main canvas onto and finally draw the offscreen canvas back to the main canvas - or simply use the offscreen canvas for your purpose and call the toBlob() method on it.

    For example:

    let image = new Image();

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
image.crossOrigin = 'anonymous';
image.onload = () => {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    context.font = '50px serif';
    context.fillStyle = 'red';
    context.fillText('rotated', 80, canvas.height / 2);
    let tempCanvas = document.createElement('canvas');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    let ctx = tempCanvas.getContext('2d');
    ctx.translate(canvas.width, canvas.height)
    ctx.rotate(180 * Math.PI / 180);

    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
    context.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
}
image.src = 'https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/300/200';
     <canvas id="canvas" width="300" height="200"></canvas>