How can I get full image after zooming in canvas

Question

I am facing this issue where once I zoom in on some image in the canvas in javascript, some part of the image goes outside of the canvas. Then I am drawing something on it. But now, I want the latest total image instead of just what is on the canvas frame. How can I get that?

Here is my code for it. Whenever a scroll-up or scroll-down happens, the below function gets called.

var zoom = function(clicks)
        {
            original = canvas.toDataURL();
            
            // clear the canvas
            var p1 = ctx.transformedPoint(0,0);
            var p2 = ctx.transformedPoint(canvas.width,canvas.height);
            ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

            // translate the image according to zoom factor and location of zoom
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x,pt.y);
            var factor = Math.pow(scaleFactor,clicks);
            ctx.scale(factor,factor);
            ctx.translate(-pt.x,-pt.y);
            

            // draw te image on canvas
            const img = document.createElement("img");
            img.setAttribute("src", original);

            img.onload = function () {
                ctx.drawImage( img, 0, 0, canvas.width, canvas.height);
            };
        }