xhackjp1/fillrect.html

## fillrect.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <title>Canvas tutorial template</title>
  <script type="text/javascript">

    function init() {
      draw1();
      draw2();
      draw3();
    }

    /* fillRect()の例 */
    function draw1() {
      let canvas = document.getElementById('tutorial');
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.fillRect(20, 20, 80, 40);
    }
    /* strokeRect()の例 */
    function draw2() {
      let canvas = document.getElementById('tutorial');
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.strokeRect(20, 120, 80, 40);
    }
    /* clearRect()の例 */
    function draw3() {
      let canvas = document.getElementById('tutorial');
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.fillRect(20, 290, 100, 100);
      ctx.beginPath();
      ctx.clearRect(50, 70, 60, 30);
    }
  </script>
  <style type="text/css">
    canvas {
      background-color: #fff;
      border: 1px solid #999;
    }
  </style>
</head>

<body onload="init();">
  <canvas id="tutorial" width="800" height="800"></canvas>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="utf-8" />
	<title>Canvas tutorial template</title>
	<script type="text/javascript">

	function init() {
	draw1();
	draw2();
	draw3();
	}

	/* fillRect()の例 */
	function draw1() {
	let canvas = document.getElementById('tutorial');
	if (!canvas \|\| !canvas.getContext) {
	return false;
	}
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillRect(20, 20, 80, 40);
	}
	/* strokeRect()の例 */
	function draw2() {
	let canvas = document.getElementById('tutorial');
	if (!canvas \|\| !canvas.getContext) {
	return false;
	}
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.strokeRect(20, 120, 80, 40);
	}
	/* clearRect()の例 */
	function draw3() {
	let canvas = document.getElementById('tutorial');
	if (!canvas \|\| !canvas.getContext) {
	return false;
	}
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillRect(20, 290, 100, 100);
	ctx.beginPath();
	ctx.clearRect(50, 70, 60, 30);
	}
	</script>
	<style type="text/css">
	canvas {
	background-color: #fff;
	border: 1px solid #999;
	}
	</style>
	</head>

	<body onload="init();">
	<canvas id="tutorial" width="800" height="800"></canvas>
	</body>

	</html>