javascript - I need help in canvas image mirroring with rotation

Question

I Am Working in Canvas Every Thing Is Working Fine Except When I Set Image in Mirror It worked fine But when I rotate that image mirror is not working can anyone help me out I will be very appreciated And This Is In Canvas JavaScript. I'm also upload a video.

here is video link https://drive.google.com/file/d/1QQIkWBP-DKN0AGl__AXEdDGoUNTFIy5j/view?usp=sharing

here is rotate + mirror code

if (color == 'Mirror') {
        if(rotate_on == false){
            ctx.save();
            ctx.clearRect(0, 0, width, height);
            ctx.translate(flip_width/2, 0);
            ctx.scale(scaleX, scaleY);
            ctx.translate(-flip_width/2, 0);
            ctx.translate(depth, depth);
            ctx.drawImage(image,positionImageX,positionImageY,image_width/nm,image_height/nm, 0, 0,diviX,diviY);
        }
        else{
            if(rotateL){
                drawRotated(degrees, canvas.height ,canvas.width ,1);
            }
            else{
                drawRotated(degrees1, canvas.height ,canvas.width,1);
            }
        }

            // Left Edge
            ctx.scale(-1, 1);
            ctx.drawImage(image,positionImageX,positionImageY,image_width/nm,image_height/nm, 0, 0,diviX,diviY);
            ctx.restore();
            ctx.save();
            
            // Right Edge
            ctx.translate(depth+diviX+diviX, depth);
            ctx.scale(-1, 1);           
            ctx.drawImage(image,positionImageX,positionImageY,image_width/nm,image_height/nm, 0, 0,diviX,diviY);
            ctx.restore();
            ctx.save();
        
            // Top Edge
            ctx.translate(depth, depth);
            ctx.scale(1, -1);           
            ctx.drawImage(image,positionImageX,positionImageY,image_width/nm,image_height/nm, 0, 0,diviX,diviY);
            ctx.restore();
            ctx.save();
            
            // Bottom Edge
            ctx.translate(depth, depth+diviY+diviY);
            ctx.scale(1, -1);           
            ctx.drawImage(image,positionImageX,positionImageY,image_width/nm,image_height/nm, 0, 0,diviX,diviY);
            ctx.restore();
            ctx.save();
    } 
    else {
        if(rotate_on == false){
            ctx.translate(flip_width/2, 0);
            ctx.scale(scaleX, scaleY);
            ctx.translate(-flip_width/2, 0);
            ctx.drawImage(image, positionImageX, positionImageY, image_width/nm, image_height/nm,27,10,width,height);
        }
        else{
            if(rotateL){
                drawRotated(degrees , canvas.height ,canvas.width );
            }
            else{
                drawRotated(degrees1 , canvas.height ,canvas.width);
            }
        }
        // Left Rect...
        ctx.fillStyle = color;
        ctx.fillRect(0, depth, depth, height - 2 * depth);        
        // Top Rect...
        ctx.fillRect(depth, 0, width - 2 * depth, depth);
        // Right Rect...
        ctx.fillRect(width - depth, depth, depth, height - 2 * depth);
        // Bottom Rect...
        ctx.fillRect(depth, height - depth, width - 2 * depth, depth);
    }

question from:https://stackoverflow.com/questions/65901041/i-need-help-in-canvas-image-mirroring-with-rotation

Answer 1

Waitting for answers