canvas中文显示乱码 html5_HTML5 canvas 画布显示问题

var canv = document.getElementById('myCanvas');

var context = canv.getContext('2d');

context.fillStyle = "#ff0000";

context.fillRect(0, 0, 100, 100);

上面代码显示正常效果如下：

但是如果把 canvas的样式放在head中，结果运行效果如下图所示(画布并不是100*100的尺寸，这就是我疑问的地方)，

后者效果的代码如下：

#myCanvas{

width:300px;

height:200px;

border:1px solid blue;

}

var canv = document.getElementById('myCanvas');

var context = canv.getContext('2d');

context.fillStyle = "#ff0000";

context.fillRect(0, 0, 100, 100);