Failed to execute 'drawImage' on 'CanvasRenderingContext2D Trying to convert a canvas into image

Question

I am having an issue creating an image of a canvas and translating it onto another canvas. The end goal is to create a loupe magnifier for a cgm viewer/editor, but I'm stuck on this issue. Here is an example.

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

Answer 1

You probably wanted to just draw a canvas, no some url And you wanted to type ctx1 and not ctx

draw_image = function() {
  let canvas1 = document.getElementById('canvas1') 
  let ctx1 = canvas1.getContext("2d");

  // just draw the original canvas
  ctx1.drawImage(canvas, 0, 0)
};