Canvas not being drawn after move to Laravel-CodePudding

I have a project that has been written without a framework and works fine. Photos are displayed on a page. Clicking on one opens a modal and the image is displayed on a canvas in the modal.

This is the javascript used to open the modal imageModal and draw the photo onto the canvas called photoImage, with e being the image that has been clicked on.

var canvas = document.getElementById("photoImage");
var canvasCtx = canvas.getContext("2d");

function viewPhoto(e) {
    $("#imageModal").modal("show");

    var image = new Image();
    image.src = e.src;

    canvas.width = image.width; // Width does not get set 
    canvas.height = image.height;  // Height does not get set 
    canvasCtx.drawImage(image, 0, 0);  // Photo does not get drawn
}

I have now used the exact same code in a Laravel project but it does not draw the picture onto the canvas. I have checked the properties of the canvas in both projects and they are the same.

For example the canvas is picking up th height property correctly in both projects but it does not change the size of the canvas in the Laravel project.

What could be causing the problem?

CodePudding user response：

var canvas = document.getElementById("photoImage")[0]; //it return an array of object 
var canvasCtx = canvas.getContext("2d");  
canvasCtx.drawImage(image, 6, 6);  // Photo does not get drawn

also you can use typeo canvas.getContext('2d').drawImage(img, 6, 6)