Mirror a shape from HTML5 canvas using javascript

Question

I have this shape that I have made on my HTML canvas, so basically what I want to do is that I want to mirror the shape and move it to a different part of the canvas. I have tried folds.scale(-1,1); but it does not work. I have viewed this other post about mirroring shapes but my code somehow doesn't work.

HTML Canvas: How to draw a flipped/mirrored image?

This is my code:

function folds(x, y ,z){
    draw.beginPath();
    draw.arc(x, y, z, 5.25, 2 * Math.PI);
    draw.closePath();
    draw.lineWidth = 7;
    draw.strokeStyle = "black";
    draw.stroke();
}

function folds2(){
    folds.scale(-1,1);
}

score 0 · Answer 1 · answered Sep 19 '21 at 06:43

The most popular solution is to create another invisible canvas in your HTML and transform its horizontal dimensions backwards:

const flippedCanvas = document.getElementById("flipped-canvas");
const flippedContext = canvas.getContext("2d");

flippedContext.scale(-1, 1);

Then, you can draw an image (or shape) on that canvas and copy it to your original canvas using drawImage:

flippedContext.beginPath();
// ...
flippedContext.stroke();
draw.drawImage(flippedCanvas, 0, 0);

Mirror a shape from HTML5 canvas using javascript

1 Answers1