Canvas createPattern () и fill () с смещением ⇐ Html

[Anonymous]

Я использую холст, чтобы нарисовать простые прямоугольники и наполнить их схемой пола (PNG). Но если я использую сценарий «камеры» для обработки смещений преобразования для холста HTML5, форма прямоугольника перемещается соответствующим образом, но шаблон заполнения всегда рисует из фиксированной точки на экране (я предполагаю верхний левый). Есть ли способ «прибить» шаблон заполнения, поэтому он всегда выступает с прямоугольником, независимо от преобразования холста, или способ добавить смещение на Fill (), которое можно рассчитать в другом месте в коде? Конечно, я мог бы просто использовать DraitImage (), но рисование прямоугольников более универсально для моих целей. < /P>

sampleDrawFunction(fillTexture, x1, y1, x2, y2) {
// This is oversimplified, but best I can do with a ~10k lines of code
x1 -= Camera.posX;
x2 -= Camera.posX;
y1 = -1 * y1 - Camera.posY;
y2 = -1 * y2 - Camera.posY;

// Coordinates need to be adjusted for where the camera is positioned

var img = new Image();
img.src = fillTexture;
var pattern = this.ctx.createPattern(img, "repeat");
this.ctx.fillStyle = pattern;

// Translate canvas's coordinate pattern to match what the camera sees
this.ctx.save();
this.ctx.translate(Camera.posX - Camera.topLeftX, Camera.posY - Camera.topLeftY);
this.ctx.fillStyle = pattern;
this.ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
this.ctx.restore();
}
< /code>

Спасибо. < /p>

Подробнее здесь: https://stackoverflow.com/questions/608 ... -an-offset