My images are not linking in my js script. think it's wp's fault

Hello all am working on some very simple js for canvas.
in the functions.php i have appropriately enqueued the script. it worked fine for rectangle fills, etc…
but when i go and try to load an image if fails. has anyone else run into this?

var myImage = new Image();
myImage.src = "waterfall/imgs/marbleAA.png";

function draw(){
	var ctx = document.getElementById('canvas1').getContext('2d');
	//alert(ctx.canvas.id+ "|" +ctx.canvas.width+ "|" +ctx.canvas.height);
	var pattern =ctx.createPattern(myImage, "repeat");
	ctx.fillStyle = pattern;
	ctx.fillRect(0,0,200,200);
	ctx.fill();
	
}

that is in my js folder, in the same theme folder i have an imgs folder w/the images
i tried imgs/image.png, /imgs/image.png, …/imgs.image.png
I tried the localhost/theme/etc…
don’t understand why it won’t link in the js. Images are coming through fine as css backgrounds too.
thx
D

The possible problem is you’re trying to draw image before it is loaded.
Use onload() callback to avoid that:

var myImage = new Image();
myImage.src = "waterfall/imgs/marbleAA.png";
myImage.onload = function() {
    draw(); //start drawing only when image is loaded
}

Thank you megazoid that was a possibility i had not entertained. although i went back to functions.php and enqued the script as true to test & then false again. either way it didn’t work.
will try your suggestion. and will try to put it live this afternoon.
thx
D

quick update & will post the finised code later.
the issue was w/the linking in the js.file.
it should have been index relative

 game.load.image('ball', 'wp-content/themes/waterfall/imgs/marbleAA.png');

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.