Article introduction of Wulin.com (www.vevb.com): html5-canvas tag-drawing rectangles.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>html5-canvas tag--draw rectangle</title>
</head>
<body>
<canvas id=1 width=200 height=200></canvas>
<script type=text/javascript>
window.onload = function(){
var canva =document.getElementById('1')
var content = canva.getContext('2d')
content.fillStyle = #ccc;//Fill the background color of canvas
content.fillRect(0, 0, 200, 200);//The parameters represent the x-axis, y-axis, width, and height respectively
content.lineWidth = 4;//Border width
content.strokeStyle = #fff;//Border color
content.strokeRect(50,50,100,100);//Border coordinates and sizes
content.fillStyle = #f00;//Rectangle fill color
content.fillRect(50,50,100,100);//Rectangle coordinates and size
}
</script>
</body>
</html>