javascript - How to copy the drawing from one canvas to another without losing quality when zooming

Question

I am drawing on an auxiliary canvas a shape, I want to copy the drawing that I made on the main canvas that has zoom and zoomout functionality, the drawing is copied perfectly, but when zooming it loses quality. How can I prevent the drawing from losing quality when copied?

the function that is executed after zooming in to repaint everything is this (The drawing that is done in the auxiliary canvas is much more complex than the one that I illustrate here, that's why it is done by layers. If I draw here directly on the main canvas, the figure has good quality):

    const canvas = canvasRef.current //THIS IS THE MAIN CANVAS
    const ctx = canvas.getContext("2d");
    var canvas2 = document.createElement('canvas') //AUXILIAR CANVAS
    var ctx2 = canvas2.getContext('2d')
    canvas2.width = canvas.width;
    canvas2.height = canvas.height;

    //DRAWING ON AUXILIAR CANVAS
    ctx2.fillStyle = 'yellow';
    ctx2.fillRect(250, 250, 100 , 50) 

    //DRAWING ON THE CANVAS THAT HAS ZOOM
    ctx.drawImage(canvas2, 0, 0);

The above draws the yellow rectangle in low quality.

question from:https://stackoverflow.com/questions/65863453/how-to-copy-the-drawing-from-one-canvas-to-another-without-losing-quality-when-z

Answer 1

Waitting for answers