Jump to content

Builtin way for drawing on a canvas "loopingly"


Recommended Posts

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 :)


Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...