<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas")
canvas.width=1024;
canvas.height=768;
canvas.style.border="solid 1px red"
var context=canvas.getContext("2d")
context.moveTo(100,100)
context.lineTo(700,700)
context.lineTo(100,700)
context.lineTo(100,100)
context.lineWidth=5
// context.strokeStyle="red"
// context.stroke()
context.fillStyle="red"
context.fill()
}
</script>
<canvas id="canvas">
</canvas>
</body>
</html>原文：http://www.cnblogs.com/zhouyx/p/4619421.html