Setting a border for a canvas wrapped in kineticJS - html5-canvas

Question

I just copypasted the code from the tutorial:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
The problem is that the style setting for canvas{} isn't taken in account.
I clearly know where the canvas is and that it SHOULD work because:
A) I've already done it, but I can't get a working copy of the code
B) Firebug tells me that there IS a canvas... So why it doesn't work?
My final goal is to distinguish the stage visually (by a border or a proper background color)
Thank you!

Answer 1

Well, alternatively you can draw a border with background color inside KineticJS by using a Kinetic.Rect to distinguish the stage visually:
var border = new Kinetic.Rect({
width: stage.getWidth(),
height: stage.getHeight(),
stroke: 'black',
strokeWidth: 4, //Border Size in Pixels
fill: '#00FF00' //Background Color
});
jsfiddle
The only tiny issue with this is that you'll get 1 Extra Kinetic Node inside your canvas. If you wanna keep the solution outside the canvas, than style your #container to be the same width and height as your stage/canvas, and then wrap the #container inside another <div> and give that <div> the original styling you had on #container. Like this:
HTML:
<div id="containerWrapper">
<div id="container"></div>
</div>
CSS:
#containerWrapper {
/*#container's old styles here*/
}
#container {
width: widthOfStage;
height: heightOfStage;
border: 4px solid #000;
background:#00FF00;
}
2nd example jsfiddle