Tengo esta forma que hice en mi lienzo HTML, así que básicamente lo que quiero hacer es reflejar la forma y moverla a una parte diferente del lienzo. He probado folds.scale(-1,1); Pero no funciona. He visto esta otra publicación sobre formas reflejadas, pero mi código de alguna manera no funciona.
HTML Canvas: ¿Cómo dibujar una imagen volteada/reflejada?
Este es mi código:
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); }La solución más popular es crear otro lienzo invisible en tu HTML y transformar sus dimensiones horizontales al revés:
const flippedCanvas = document.getElementById("flipped-canvas"); const flippedContext = canvas.getContext("2d"); flippedContext.scale(-1, 1);Luego, puede dibujar una imagen (o forma) en ese lienzo y copiarla en su lienzo original usando drawImage :
flippedContext.beginPath(); // ... flippedContext.stroke(); draw.drawImage(flippedCanvas, 0, 0);