HTML5 Canvas: Swivel Pattern

Question

As a training project, I am trying to recreate the procedure-processed hills from Tiny Wings using an HTML5 canvas. My goal is to create textures such as the hill in this picture:

So far, I have a seamless repeating texture that I created. It looks something like this:

As you can see, this is part of the way, however, in Tiny Wings, sinusoidal patterns often rotate at an angle. My question is: Is it possible to take a seamlessly repeating pattern, rotate it, then put it in a rectangle and still have a seamlessly repeating pattern?

Initially, I thought it was trivial that any rotating repeating pattern trimmed to it would still be repeating. However, my research led me to the conclusion that this is not so.

If what I am describing is impossible, how can I use the rotating version of the image that I created as a template / fill for the shape? So far, the only solution I can come up with is to use the canvas canvas area. Are there any other ways to do this?

Matters Related:

• html5 populated with canvas shapes
• HTML5 canvas - Fill a circle with an image

Answer 1

To achieve what is in the image from tiny wings, using the form (texture) provided by you.

• draw your texture vertically on the screen (it looks like it has been skewed, doesn't rotate).
• apply a few translucent hill-shaped shapes with a wide stroke width to create a background shading effect.
• Hook texture with the shape of a hill.
• apply a translucent grunge texture to the entire canvas.