Why is my canvas object hidden until mouseover?

Question

I'm using paper.js to create vector graphics on a canvas, but after drawing objects, they're only visible once I hover the mouse over the canvas. Why?

Here's my code:

<canvas style="position:absolute;left:0px;top:0px;z-index:999;" id="myCanvas" resize></canvas>

var canvas = document.getElementById('myCanvas');
paper.setup(canvas);
var rectangle = new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100));
var path = new paper.Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';

And my jsFiddle to demonstrate this: http://jsfiddle.net/enotech/qujEf/

Answer 1

either call: paper.view.draw() or paper.view.update() at end of your code to make it visible, Updated Demo: jsFiddle

Answer 2

In paper.js line 10545 that function is called when the mouse is moved into the view. That function calls handleMouseMove() which calls view.update() to update the canvas. I don't know paper.js, but it seems need to call this function yourself. So throw in a:

paper.view.update();

When you want to push your changes to the canvas.

like so: http://jsfiddle.net/qujEf/2/