JavaScript Canvas createPattern

Question

I have problem with canvas createPattern. I have two boxes, both will move after pressing a keyarrow:

The problem is that the box background filled by createPattern also is moving. How to avoid that? Is there any solution? The big box is only an example (drawImage is not the good solution for me, I need something that will repeat background image).

Thank you for help

Worksforme. The background is static, and the box that shows it is moving over it. — Bergi
– Bergi, Commented Aug 25, 2013 at 12:28
@Bergi I don't know how to explain what I really want :) the box is changing the position, but the background is not the same all the time when the box is moving. So it looks like scrolling background. I want it just like drawImage (but i cant use becouse I need something for irregular shapes). — Amay
– Amay, Commented Aug 25, 2013 at 12:41
So you want to make the fillpattern relatively positioned to the drawn shapes? — Bergi
– Bergi, Commented Aug 25, 2013 at 13:10
@Bergi I found this simple example to show what I mean: jsbin.com/oxuyeq/8/edit . The triangle is just like mine box - the background move when you move the shape. And I want to achive the second, rectangle example - background deosnt move when you move it. Of course I want use my example to make it work. — Amay
– Amay, Commented Aug 25, 2013 at 13:26

Bergi · Accepted Answer · 2013-08-25 18:00:58Z

The problem is that the box background filled by createPattern also is moving.

Actually your problem is that the background is not moving - it is static, while you are drawing your rectangle to different positions.

How to avoid that?

The pattern will always be drawn at the coordinate origin, whose actual position is defined by the current transformation. In future you will be able to transform the pattern itself with the setTransform method, but since that currently is not implemented anywhere you instead will have to change the global transformation matrix.

In your case it means, that instead of drawing your rectangle at x/y, you translate the whole context to x/y and draw your rectangle at 0/0 then:

ctx.fillStyle=pattern;
ctx.save();
ctx.translate(boxes[i].x - left , boxes[i].y);
ctx.fillRect(0, 0, boxes[i].width, boxes[i].height);
ctx.restore();

(updated demo)

Collectives™ on Stack Overflow

JavaScript Canvas createPattern

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related