Filling a polygon with a pattern (repeating image)

[wayfinder]

Hi all! I'm trying to draw a polygon that's filled with a repeating texture, and I'm wondering how to tackle that... 

 

My initial thought was to use a bitmapdata, draw the polygon on it and then use the globalCompositeOperation source-in to draw the texture inside the polygon. that's all well and good, but I can't seem to find out how to draw a tiling pattern into the 2d context... 

 

Are tilesprites the way to go here?

[wayfinder]

Alright, I think I have an approach that will work, with context.createPattern... Now my problem is drawing that polygon exactly where it is in the world.

 

I'm creating a bitmapData object the size of the polygon. This part works.

 

Then I draw the polygon on that bitmapData and add the bitmapData to the sprite that contains the collision body, and that's where it falls apart

 

The texture is added to the world at an offset that seems to vary from polygon to polygon, yet the polygon within that offset texture is in the perfect right place. Rectangles and parallelograms seem to be perfect, so I'm thinking that it MUST have something to do with the center of mass somehow, but I can't puzzle it apart. Can anybody help?

 

 

 

edit: the colorful polys are the p2 debug bodies, that's where the rectangles are supposed to be. I'm filling them in black at the moment, and the full bitmapdata bounds are visible in dark blue.

[wayfinder]

Solved it. But I don't pretend to understand why exactly this works:

var maxX = Math.abs(this.physics.p2.mpxi(sceneryBody.data.aabb.lowerBound[0]) - this.physics.p2.mpxi(sceneryBody.data.aabb.upperBound[0]));            var maxY = Math.abs(this.physics.p2.mpxi(sceneryBody.data.aabb.lowerBound[1]) - this.physics.p2.mpxi(sceneryBody.data.aabb.upperBound[1])); var shapeWidth = maxX;            var shapeHeight = maxY; var renderTarget = new Phaser.BitmapData(this, 'scenery' + i, shapeWidth, shapeHeight); var minXP = Number.MAX_VALUE, minYP = Number.MAX_VALUE; for (j = 0; j < points.length; j++) {     minXP = this.math.min(minXP, this.physics.p2.mpxi(points[j][0]));    minYP = this.math.min(minYP, this.physics.p2.mpxi(points[j][1]));} var offsetX = (maxX / 2) + minXP;        var offsetY = (maxY / 2) + minYP;            renderTarget.ctx.translate(-offsetX, -offsetY); renderTarget.ctx.beginPath();            renderTarget.ctx.moveTo((this.physics.p2.mpxi(points[0][0]) + shapeWidth * 0.5), (this.physics.p2.mpxi(points[0][1]) + shapeHeight * 0.5));            for (j = 1; j < points.length; j++) {                renderTarget.ctx.lineTo((this.physics.p2.mpxi(points[j][0]) + shapeWidth * 0.5), (this.physics.p2.mpxi(points[j][1]) + shapeHeight * 0.5));                }            renderTarget.ctx.closePath();            renderTarget.ctx.fill(); scenerySprite.loadTexture(renderTarget);            scenerySprite.anchor.setTo(0.5 - (offsetX / shapeWidth), 0.5 - (offsetY / shapeHeight)); 

[wayfinder]

Oh, and the fill was the easiest part: 

 

renderTarget.ctx.fillStyle = renderTarget.ctx.createPattern(this.cache.getImage('fill1'), 'repeat');