When I initially drew an image on the canvas, it looked like this: https://i.sstatic.net/t6sIC.png Now, I am attempting to reload the same image into the canvas, and it appears like this: https://i.sstatic.net/xLiO7.png Here is my code:
var ctx = element.childNodes[i + 1].children[0].firstElementChild;
if (ctx.getContext) {
ctx = ctx.getContext('2d');
var img1 = new Image();
img1.onload = function() {
ctx.drawImage(img1, ctx.canvas.width, ctx.canvas.height);
}
}
I attempted to set the canvas height and width to match the image, but it did not work as expected.
var ctx = element.childNodes[i + 1].children[0].firstElementChild;
if (ctx.getContext) {
ctx = ctx.getContext('2d');
var img1 = new Image();
img1.onload = function() {
img1.width = ctx.canvas.width;
img1.height = ctx.canvas.height;
ctx.drawImage(img1, ctx.canvas.width, ctx.canvas.height);
}
}
After trying this approach, the image loaded correctly but when attempting to redraw the image, it appeared in a different position than expected.
var ctx = element.childNodes[i + 1].children[0].firstElementChild;
if (ctx.getContext) {
ctx = ctx.getContext('2d');
var img1 = new Image();
img1.onload = function() {
ctx.canvas.width = img1.width;
ctx.canvas.height = img1.height;
ctx.drawImage(img1, ctx.canvas.width, ctx.canvas.height);
}
}