Question

I am having difficulties rendering several patterns (each with different texture) in the 2d context of HTML5 canvas.

Assuming I have three separate canvases, two off-screen containing different textures and one for rendering. Let these offline canvases be A and B.

Then:

var patternA = ctx.createPattern(A, "repeat-x");
ctx.fillStyle = patternA;
ctx.fillRect(100,100,20,20);

var patternB = ctx.createPattern(B, "repeat-y");
ctx.fillStyle = patternB;
ctx.fillRect(150,100,20,20);

There should be two 20×20 rectangles, each with their own pattern, however the second rectangle doesn’t render at all. I’ve tried everything to get them working, but to no avail.

Why is that? How should I render multiple tiling textures onto the same canvas?

Answer 1

What browsers are you trying? With FireFox and Chrome, I couldn’t get either pattern to render with repeat-x or repeat-y. Instead, I was able to get both to render with just repeat. (See http://jsfiddle.net/ZthsS/1/)

It is possible that browsers have an incomplete implementation of the specification. According to the implementation status at http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-createpattern, IE beta and FF nightly pass all test cases but other browsers don’t. I would recommend just using repeat for the time being. You could emulate repeat-x and repeat-y by simply limiting the width of the fillRect to the width of the pattern:

var patternA = ctx.createPattern(A, "repeat");
ctx.fillStyle = patternA;
ctx.fillRect(100,100,20,Math.min(20, A.height));

var patternB = ctx.createPattern(B, "repeat");
ctx.fillStyle = patternB;
ctx.fillRect(150,100,Math.min(20, B.width), 20);