I'm not very familiar with JavaScript or jQuery, but I was attempting to troubleshoot a functionality that was previously created. The issue is that it works fine on Firefox, but it fails on Chrome. I am importing an image and then cropping the necessary data from it. Sometimes, the image is unclear and very small, so I need to implement a zoom functionality. Additionally, since the zoom feature focuses on the center of the image, I also need a move option that allows the image to be moved left or right. Initially, I tried using the img tag alone for both moving and zooming, which worked well on Firefox without any issues. However, when I tested it on Chrome, the image didn't show up at all. The code snippet below pertains to importing an image and creating a canvas for it. The previous developer had utilized the div tag to create a canvas, but I found that zoom and move functionalities didn't work with the div tag.
$("#movingImage").empty();
//$("#movingImage").attr("src", image.src);
$("#movingImage").append("<canvas id=\"canvas\">");
canvas = $("#canvas")[0];
context = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
Here is the corresponding HTML:
<div id="views" >
<img src="" id="movingImage" alt="" />
</div>