CocoonJS Canvas image pattern fill not working

Question

I'm using HTML5 Canvas to draw a GUI.

Image pattern fill works fine in browsers (including mobile), but when I use the Cocoon JS launcher on Android or iPad, the texture pattern is just shown as black.

var pattern = context.createPattern(imageResource,"repeat");
context.fillStyle = pattern;
context.fillRect(0,0,300,300);

Looking at the CocoonJS console, the texture is loading correctly, and context.drawImage() works fine with the same image.

The docs indicate that Canvas patterns are supported. Any ideas why pattern fill doesn't work in CocoonJS launcher?

Thanks

Answer 1

Canvas patterns are supported on CocoonJS. This example works fine on CocoonJS Launcher with POT and NPOT textures:

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function() {
    var pattern = ctx.createPattern(img,"repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0,0,300,300);
}
img.src = "img.png";

Please, share more code to reproduce the problem.

Answer 2

I managed to track this down to the fact I was loading image resources after initialising Three JS (renderer, camera etc).

Despite the fact I was waiting for image resources to load before attempting a Canvas texture fill, if within the Cocoon launcher, I got the 'no fill' problem.

All I did was change the order of things: load image resources first, then initialise ThreeJS. Fill seems to work perfectly now within the launcher, although I'm not entirely sure why.