七巧板为什么画不出来
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>canvas</title>
<script>
var tangram[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"yellow"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"cyan"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"grey"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},[{x:200,y:600}],color:"orange"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"},
{p:[{x:800,y:400},{x:800,y:800},{x:800,y:400}],color:"grey"}
]
window.onload=function(){
var canvas = document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var ctx = canvas.getContext("2d");
for (var i = 0; i < tangram.length; i++) {
draw(tangram[i],ctx);
}
}
function draw(piece,ctx)
{
ctx.beginPath();
ctx.moveTo(p[0].x,p[0].y);
for (var i = 1; i < piece.p.length; i++) {
ctx.lineTo(piece.p[i].x,piece.p[i].y);
}
ctx.fillStyle = piece.color;
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="800" style="border:2px solid red;display: block;margin: 50px auto;">
当前浏览器不支持Canvas，请更换浏览器再试！
</canvas>
</body>
</html>
错误如图