Me enfrento a este problema en el que una vez que hago zoom en alguna imagen en el lienzo en javascript, una parte de la imagen sale del lienzo. Entonces estoy dibujando algo en él. Pero ahora, quiero la última imagen total en lugar de solo lo que está en el marco del lienzo. ¿Cómo puedo conseguir eso?

Aquí está mi código para ello. Cada vez que ocurre un desplazamiento hacia arriba o hacia abajo, se llama a la siguiente función.

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