Tengo un problema al crear una imagen de un lienzo y traducirla a otro lienzo. El objetivo final es crear una lupa para un visor/editor de cgm, pero estoy atascado en este problema. Aquí hay un ejemplo.
HTML: <canvas id="canvas" width=240 height=240 style="background-color: aqua; left:0;right:0;margin:auto;z-index:1;margin-top:0px;"> </canvas> <canvas id="canvas1" width=240 height=240 style="background-color:#808080;"> </canvas> <p></p> <a id="download" href="" onclick="draw_image();">Download to myImage.jpg</a> JS: var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var ox = canvas.width / 2; var oy = canvas.height / 2; ctx.font = "42px serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#800"; ctx.fillRect(ox / 2, oy / 2, ox, oy); draw_image = function() { let canvas1 = document.getElementById('canvas1') var image = canvas1.toDataURL("image/png") let ctx1 = canvas1.getContext("2d"); ctx.drawImage(image, 0, 0) };Probablemente solo quería dibujar un lienzo, no una URL y quería escribir ctx1 y no ctx
draw_image = function() { let canvas1 = document.getElementById('canvas1') let ctx1 = canvas1.getContext("2d"); // just draw the original canvas ctx1.drawImage(canvas, 0, 0) };