Builtin way for drawing on a canvas "loopingly"

[Chocobo]

Hi there

I'd like to know if there is a builtin way to draw to a canvas "loopingly" - I'm sorry that I cannot describe the term better, so I will describe it with an image. I'd like to have the following behavior: If I do a canvas.fillRect, everything that intersects with the canvas is filled normally; but everything that if "off canvas" will be translated to the opposite side. This effectively means, if I fill a rect that has a right "off canvas" part, this part will be drawn to the left side instead. This, of course, should work for every viable combination of sides, e.g. right bottom.

While it should'nt be to hard to implement this behavior on my own - I could just cut the rects apart and make multiple fillRect calls - I'd like to know if there is a way to tell the canvas to do it naturally for the parts that are "off canvas". This is not just about rects, but about images, circles, ... If you look at the picture, the 3rd picture would mean that, if I implemented it on my own by cutting the rect into regions, I would have to perform 4 fillRect calls instead of one. And if it was an image, there would be 4 drawImage calls instead of one (also clearRect calls since I'm working with opacity).

Thanks in advance for anyone helping me

PS: I just wanted to ask you guys before I attempted to "have it my way" - it may also be the case that I'm suffering from premature optimization
 

 

[samlancashire]

Not familiar with a built in way of doing this. I think you're on the money with the premature optimization. Are there a ton of images being drawn in this way every frame? 4 drawImage calls is nothing. My tile based game (768x640, with 64x64 tiles) runs 60fps no problem on my potato of a laptop, and thats 120 drawImage calls before I draw any sprites or worry about any game logic.