不期望的结果是画布形状绘图（html5）

Question

我试图用canvas元素绘制一个简单的菱形形状。 我用了这段代码：

cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(50,150);
cxt.lineTo(100,200);
cxt.lineTo(150,150);
cxt.lineTo(100,100);
cxt.closePath();
cxt.strokeStyle = 'black';
cxt.stroke();
cxt.fillStyle='yellow';
cxt.fill();

但是，输出是双边三角形！ （下面的Printscreen：）

帮助我找出错误的原因..！

使用的浏览器： mozilla firefox 43.0.4

Answer 1

增加画布的高度。

var canvas = document.getElementById("shape");
var cxt = canvas.getContext('2d');
cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(50,150);
cxt.lineTo(100,200);
cxt.lineTo(150,150);
cxt.lineTo(100,100);
cxt.closePath();
cxt.strokeStyle = 'black';
cxt.stroke();
cxt.fillStyle='yellow';
cxt.fill();

<canvas id="shape" width="500" height="500"></canvas>