easeljs background image rect - cover

Question

I have a shape in easeljs. When it is initially created it has a backgroundcolor set to white. Then, at some point later down the line, I need to give this rectangle shape a background image - I really can't get it to work.

I would like the background image of the shape to be positioned like this:

background-image:    url(images/background.svg);
background-size:     cover;                   
background-repeat:   no-repeat;
background-position: center center;

Anyone who can tell me how to approach this. Thanks :)

Answer 1

If you want to use a background image with EaselJS, you can't use CSS.

You can instead use the bitmapFill with EaselJS graphics, which does a pattern fill using an image.

var img = document.createElement("img");
img.src = "path/to/image";

var shape = new createjs.Shape();
shape.graphics.beginBitmapFill(img, "optionalRepeat", optionalMatrix);
shape.graphics.drawRect(0,0,100,100);

Here is a quick fiddle showing it in action: http://jsfiddle.net/lannymcnie/ogy1qmxn/2/

Cheers,