CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
JDS
JDS

Reputation: 17018

KineticJS - Any way to repeat images?

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.com/tutorials/html5-canvas-patterns-tutorial/ :

enter image description here

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.

Upvotes: 0

Views: 2537

Answers (1)

Eric Rowell
Eric Rowell

Reputation: 5219

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

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

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

Cheers!

Upvotes: 8

Related Questions