I've switched over to kineticJS and I'm trying to have a background image repeat itself. Here is the code I am using:

var background_image = new Image();
background_image.onload = function() {
    var image = new Kinetic.Image({
        image: background_image,
        width: this.width,
        height: this.height
    });
    mainLayer.add(image);
    stage.add(mainLayer); // now mainLayer is available
};

Now what I'd like to do is essentially what this tutorial does: / :

That tutorial makes use of the canvas/context objects to repeat the image. I couldn't find an image repeat in the docs, so I was wondering if maybe I could access the main context element of my stage (or layer?) and then use that similar to the tutorial.

I've switched over to kineticJS and I'm trying to have a background image repeat itself. Here is the code I am using:

var background_image = new Image();
background_image.onload = function() {
    var image = new Kinetic.Image({
        image: background_image,
        width: this.width,
        height: this.height
    });
    mainLayer.add(image);
    stage.add(mainLayer); // now mainLayer is available
};

Now what I'd like to do is essentially what this tutorial does: http://www.html5canvastutorials./tutorials/html5-canvas-patterns-tutorial/ :

That tutorial makes use of the canvas/context objects to repeat the image. I couldn't find an image repeat in the docs, so I was wondering if maybe I could access the main context element of my stage (or layer?) and then use that similar to the tutorial.

• javascript
• html
• canvas
• kineticjs

1 Answer 1

Try using a Rect with an image fill. Image fills are repeated by default. Here's an example:

http://www.html5canvastutorials./kineticjs/html5-canvas-set-fill-with-kineticjs/

You can also change the pattern repeat type, use offsets, and scale the pattern image

Cheers!