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