Hello I am trying to add this js to the theme. I've loaded it in the script and added a canvas tag in the html but it's not working
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(type == "main" && obj.id == 311){
// Put all of your js, without document ready inside here
const canvasTag = document.querySelector("canvas");
canvasTag.width = window.innerWidth * 2
canvasTag.height= window.innerHeight * 2
canvasTag.style.width = window.innerWidth + "px"
canvasTag.style.height = window.innerHeight + "px"
const context = canvasTag.getContext("2d")
context.scale(2, 2)
let aimX = null
let aimY = null
let currentX = null
let currentY = null
let i = 0
const images = ["http://emidiobattipaglia.com/wp-content/uploads/2020/09/image1.jpg", "http://emidiobattipaglia.com/wp-content/uploads/2020/09/image2.jpg", "http://emidiobattipaglia.com/wp-content/uploads/2020/09/image3.jpg", "http://emidiobattipaglia.com/wp-content/uploads/2020/09/image4.jpg"].map(src =>{
const image = document.createElement("img")
image.src= src
return image
})
document.addEventListener("mousemove",function() {
aimX = event.pageX
aimY = event.pageY
if (currentX === null) {
currentX = event.pageX
currentY = event.pageY
}
})
canvasTag.addEventListener("click",function () {
i = i + 1
if(i >= images.length) {
i=0
}
})
const draw = function() {
if(currentX) {
if(images[i].complete) {
context.drawImage(images[i], currentX -200, currentY -300, 400, 600)
}
currentX = currentX + (aimX - currentX) * 0.05
currentY = currentY + (aimY - currentY) * 0.05
}
requestAnimationFrame(draw)
}
draw()
}
});
</script>