Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Say that I have a spritesheet like this

simple spritesheet

And I want to use the dirt tile at (1, 1). I know that I can repeat an entire image using createPattern but how do I create the pattern from just the tile section of the image? So far I have this

var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(x, y, w, h);

I know I could use repeated calls to ctx.drawImage but is it possible to get the same effect using patterns?

share|improve this question

closed as off-topic by Vaughan Hilts, Jari Komppa, MrCranky, aaaaaaaaaaaa, Nathan Reed Apr 30 '14 at 2:32

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions that aren't specific to game development are off-topic here, but can be asked on Stack Overflow. A good rule of thumb is to ask yourself "would a professional game developer give me a better/different/more specific answer to this question than other programmers?"" – Vaughan Hilts, Jari Komppa, MrCranky, aaaaaaaaaaaa, Nathan Reed
If this question can be reworded to fit the rules in the help center, please edit the question.

Please see this question on the main StackOverflow:… – totov Apr 8 '14 at 15:29
Oh snap, I'm not sure how I missed that one. Thanks! – Mike C Apr 8 '14 at 15:40
up vote 2 down vote accepted

Here's what I found out by following this link.

context.drawImage can take an img, canvas, or video element. So you can decide to use the contents of an off-screen canvas as a pattern.

// First we create a canvas to draw our pattern on
// Doesn't actually have to be in the DOM
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = textureWidth;
offscreenCanvas.height = textureHeight;

// Grab it's context and render to it
var offscreenContext = offscreenCanvas.getContext('2d');
    texture,       // the Image
    sourceX,       // X offset on the spritesheet
    sourceY,       // Y offset on the spritesheet
    textureWidth,  // Width of the sprite
    textureHeight, // Height of the sprite
    0,             // Destination X
    0,             // Destination Y
    textureWidth,  // Destination width
    textureHeight  // Destination height

Now here's the fun part: creating a pattern from our "invisible" canvas.

// Can use 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'
var pattern = context.createPattern(offscreenCanvas, 'repeat');
context.fillStyle = pattern;
context.fillRect(x, y, textureWidth, textureHeight);

As an added bonus, this is much faster than making multiple drawImage calls.

share|improve this answer
WARNING: The JSPerf linked above causes repeated crashing of my graphics driver for the drawPattern! – Vaughan Hilts Apr 8 '14 at 20:31
I shrank down the test area so hopefully it won't crash any more drivers haha. – Mike C Apr 29 '14 at 17:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.