KineticJS: Set width based on percentage

kineticjs

Solution

A percentage value won't work (I tried it). As you are working in javascript, you can easily get the width of the window and calculate the number of pixels needed to take up the required percentage of space:

var stage = new Kinetic.Stage({
    container: 'container',
    width: (window.innerWidth / 100) * 80,  // 80% width of the window.
    height: 200
});

If you want to resize the stage when the window is resized, you could use the `window.onresize` event.

window.onresize = function(event) {
    stage.setWidth((window.innerWidth / 100) * 80);  // 80% width again
}

JSFiddle of resize code

Problem

I'm trying KineticJS and see this example: ``` var stage = new Kinetic.Stage({ container: 'container', width: 500, height: 200 }); ``` My question is how to set width based on percentage. I want something like: ``` var stage = new Kinetic.Stage({ container: 'container', width: 100%, height: 200 }); ``` Any chance? Thanks!

Original source