Question

As a learning project I’m attempting to re-create the procedurally generated hills from Tiny Wings using the HTML5 canvas. My goal is to generate textures like the hill in this picture:

Thus far, I have a seamless repeating texture that I’ve generated. It looks a little like this:

As you can see, this is part way there, however in Tiny Wings, the sinusoid patterns are often rotated on an angle. My question is this: Is it possible to take a seamlessly repeating pattern, rotate it, then clip it to a rectangle and still have a seamlessly repeating pattern?

I originally thought this was trivial, that any rotated repeating pattern clipped to it’s original dimensions would still repeat. However my investigations lead me to believe this is not the case.

If what I’m describing isn’t possible, how would I use a rotated version of the image I have generated as the pattern / fill for a shape? So far the only solution I can think of is to use a canvas clip region. Are there any other ways to accomplish this?

Related Questions:

• html5 canvas shapes fill
• HTML5 Canvas – Fill circle with image

Answer 1

To achieve what is in the image from tiny wings using the shape(texture) you supplied.

1. draw your texture-shape vertically to screen (it looks like it has been skew’ed not rotated)
2. apply a few semi-transparent hill shaped lines with a wide stroke width to create the phong shading effect.
3. clip the texture-shape with the shape of the hill.
4. apply a semi-transparent grunge texture to the whole canvas.