0

For my tumblr theme, I'm drawing stuff on the canvas for the background, but with infinite-scroll it doesn't take too long before the canvas is too large to be drawn on (depending on browser etc. - haven't hit the limit in Chrome yet).

I'm using the canvas because it was suggested for filling in gaps between posts (in packery) here, but I was wondering whether it would be a much worse solution to create an absolutely positioned element with blocks with backgrounds instead, destroying and recreating on resize/re-layout.

What would be the best solution? Should I create more canvases on the fly in javascript whenever more posts are loaded, and if so, what would be the best method to do this? Would it be a horrible idea to scrap the canvas and use absolutely positioned elements instead?

Marcus
  • 136
  • 2
  • 8
  • You're drawing tumblr posts on a canvas? – Meredith Jun 02 '14 at 01:22
  • @Meredith "filling in gaps between posts" I guess not...I hope not :) – Winchestro Jun 02 '14 at 01:30
  • Yeah I saw that but it doesn't make sense to my why you'd want overlay the posts on an infinitely large canvas. You'd just use individual elements as fillers or just have a background image on the whole document. – Meredith Jun 02 '14 at 01:33
  • edit: just checked his profile for his recent questions TT and looks like he tries to create some canvas pattern thingy with photos. – Winchestro Jun 02 '14 at 01:43
  • No, heavens no, sorry if I was being that unclear, though I did link this [question on packery's github which explains exactly what it is I'm trying to do](https://github.com/metafizzy/packery/issues/131) and contains the canvas solution straight from the lips (fingertips) of Desandro himself. – Marcus Jun 02 '14 at 02:21
  • you can see what I'm doing in action here: http://cubetestalmond.tumblr.com/ – Marcus Jun 02 '14 at 02:25
  • Again, this particular approach isn't my own idea (as I've said, it came from the inventor of packery) and I'm certainly not married to it, as I think I indicated in the question. If the approach is wrong, do feel free to suggest another way of accomplishing the same results. – Marcus Jun 02 '14 at 05:11

2 Answers2

0

No no no. When doing an infinite scroller you need to do two things (one or another, or both)

1) Scroll the Background Texture

Don't create a huge texture or image for the background. Create a pattern which is an image that can be seamlessly be repeated again and again one next to another.

Then offset the pattern to give the effect of movement, but actually you are just creating a displacement of the initial coordinates. On some game engines the texture needs to be set to "repeat", but on HTML5 canvas "repeat" is the default.

Check out this two posts to learn about Patterns and the Translate command which is what you are looking for:

Canvas pattern offset

Moving the start position of canvas pattern

2) Create and Destroy obstacles (for a Game)

Have two sets of obstacles, the one currently rendering on the screen and the new one about to enter the screen. Move them left (assuming the scroller is horizontal), and as soon the first set of obstacle is off the screen, and the second set of obstacles is currently visible, destroy all objects of the first set of obstacles and create a new set off the screen into right area. This way you always have only two sets of obstacles and not an infinite number or very large number.

I usually have an invisible obstacle and the end of the obstacle set to easily detect when the obstacle is not visible anymore, by checking only one object and not all of them.

You can also do this for the background as an alternative to method 1, using a pattern texture (seamless repatable image) duplicated. Always drawing the two and moving them at the same speed, once one is out of screen to the left, move it to the right side and keep moving both left again.

I found this nice example of scrolling the background with this technique:

HTML5 Canvas Game: Panning a Background

Community
  • 1
  • 1
Baltico
  • 483
  • 3
  • 9
-1

The correct answer seems to have been, "don't use canvas, you idiot."

So I redid the thing with absolutely positioned div elements. Case closed.

Marcus
  • 136
  • 2
  • 8