paper js display stop issue - html5-canvas

Question

I use paper.js and canvas to make web api, but when open web page , there is nothing until I move mouse on canvas. I don't know why.
code as follow, actually when I try to draw a box , it also like that.
<script language="javascript" type="text/javascript" canvas="canvas">
paper.install(window);
window.onload=function(){
var scope2 = new PaperScope();
paper = scope2.setup('controlpanel');
// var L_controlpanel = new Layer();
var bgshadoW = new Shape.Rectangle({
point:[10,10],
size:[200,360],
fillColor:'#f2f2f2',
shadowColor:'black',
shadowBlur: 12,
shadowOffset: [5, 5]
});
var colorfunC ;
var G_colorfunC = new Group();
var colorcontenT = ['#ffff66','#77ff33','#66b3ff','#f0aad9','#ffd486']
for (var i, i=0;i<5;i++){
colorfunC = new Path.Rectangle({
point:[20,20+30*i],
size:[15,15],
radius:5,
strokeColor: 'black',
strokeWidth: 1,
fillColor:'#f2f2f2',
data:{'click':0,'color':colorcontenT[i]}
});
G_colorfunC.addChild(colorfunC);
colorfunC.onClick = function(event){
G_colorfunC.fillColor='#f2f2f2';
this.fillColor=' #4dc3ff';
fillcolorshoT = this.data['color'];
}
fixdemO = new Path.Rectangle({
point:[60,20+30*i],
size:[50,15],
fillColor:colorcontenT[i]
});
}
var G_denVfunC = new Group();
var denVcontenT = [120,150,200,250,300]
for (var i, i=0;i<5;i++){
denVfunC = new Path.Rectangle({
point:[20,200+30*i],
size:[15,15],
radius:5,
strokeColor: 'black',
strokeWidth: 1,
fillColor:'#f2f2f2',
data:{'click':0,'denV':denVcontenT[i]}
});
G_denVfunC.addChild(denVfunC);
denVfunC.onClick = function(event){
G_denVfunC.fillColor='#f2f2f2';
this.fillColor='#4dffa6';
denV = this.data['denV'];
}
FixText = new PointText({
point:[60,212+30*i],
fontSize:14,
fillColor: 'black',
content:'DOMA density: '+denVcontenT[i]
});
}
}
</script>

Answer 1

found cause,just add
paper.view.update();