cheng470/canvas-rectangle.html

## canvas-rectangle.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas Rectangle</title>
    <style>
    body {
      background-color: #eee;
    }
    #outer {
      margin: 40px;
    }
    #canvas {
      border: 10px yellow solid;
    }
    </style>
  </head>
  <body>
    <div id="outer">
      <canvas id="canvas" width="400" height="400">
        Your browser doesn't support the canvas!
      </canvas>
    </div>
    <script>
      var mycanvas = document.getElementById("canvas");
      var ctx = mycanvas.getContent("2d");

      ctx.fillStyle = "rgb(255,0,255)";
      ctx.fillRect(30, 30, 400, 400);

      ctx.fillStyle = "rgba(0,0,0,0.5)";
      ctx.fillRect(60,60,200,200);

      ctx.fillStyle = "rgba(0,0,0,0.25)";
      ctx.fillRect(90,90,400,400);

    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Canvas Rectangle</title>
	<style>
	body {
	background-color: #eee;
	}
	#outer {
	margin: 40px;
	}
	#canvas {
	border: 10px yellow solid;
	}
	</style>
	</head>
	<body>
	<div id="outer">
	<canvas id="canvas" width="400" height="400">
	Your browser doesn't support the canvas!
	</canvas>
	</div>
	<script>
	var mycanvas = document.getElementById("canvas");
	var ctx = mycanvas.getContent("2d");

	ctx.fillStyle = "rgb(255,0,255)";
	ctx.fillRect(30, 30, 400, 400);

	ctx.fillStyle = "rgba(0,0,0,0.5)";
	ctx.fillRect(60,60,200,200);

	ctx.fillStyle = "rgba(0,0,0,0.25)";
	ctx.fillRect(90,90,400,400);

	</script>
	</body>
	</html>