Shape.graphics.beginBitmapFill with EaselJS

Question

Hey I exported a flash project with easelJS (to javascript) and I'm trying to fill a shape with a bitmap:

this.shape = new cjs.Shape();
//this.shape.graphics.f("#333333").s().p("AifCgIAAk/IE/AAIAAE/g");
var image = new Image();
image.src = "images/Bitmap1.jpg";
this.shape.graphics.beginBitmapFill( image );

The comment line is from the original export (draws a grey rectangle. So question is: How do I fill the shape with a bitmap?

The whole thing: http://pastebin.com/K79sLtHT

Answer 1

The "f()" call in the export is the solid color fill. Just replace this with your bitmap fill:

this.shape.graphics.beginBitmapFill( image ).s().p("AifCgIAAk/IE/AAIAAE/g");

Note that the fill will not show up unless your stage is updated (ie. redrawn) after the image has loaded. As such, you'll probably either want to preload that image before running this drawing code, or make sure that stage.update() is called after "image" loads. The latter will happen automatically if you have an active Ticker updating the stage (which Flash sets up on export if you have any animation in your FLA).