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.width+ "|" +ctx.canvas.height);
	var pattern =ctx.createPattern(myImage, "repeat");
	ctx.fillStyle = pattern;

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.

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.

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.