How to set background in easeljs canvas

[Shafi Muhammed]

Hi Im a new bei to Easel js library.

I tried to set an image as background to a stage. but its size is not related to canvas size. I need an approach to scale the background to fit to canvas. The canvas size varies according to window size. Please Help....

[BeaT Adrian]

For a static background you can do this

- at window.resize() resize the parent of the canvas
- put canvas size 100% to fill the entire container
- put your image as new Image();
- take the width of the image (img.width)
- calculate the scale between img.width / canvas.width
- scale the width and height of the image to fit the canvas

You will need to make some restrictions in order to lock the width / height proportion of the image on the canvas and some other exceptions.


---If you just want to fill the background with a pattern is easier, something like this
img = new Image(path);

back = new Shape();
stage.addChild(back);
back.x = 0;back.y = 0;
back.graphics.beginBitmapFill(img,'repeat').drawRect(0,0,canvas.width,canvas.height);