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);
}
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);