rockos/index_shape.html

## index_shape.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>KidsLab LifeGame</title>
  <script src="main_shape.js"></script>
  <style>body{background:white;margin:0;padding:0;}</style>
</head>

<body>
  <canvas id="canvas1" width="140" height="140"></canvas>
  <canvas id="canvas2" width="140" height="140"></canvas>
  <canvas id="canvas3" width="400" height="200"></canvas>
</body>

</html>

## main_shape.js
window.onload = function() {
    drawRect();
    drawCircle();
    drawAngle();
}

/* 長方形を描く */
function drawRect() {
  var canvas = document.getElementById('canvas1');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 80, 40);
}


/* 円を描く */
function drawCircle() {
  var canvas = document.getElementById('canvas2');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 0, Math.PI*2, false);
  ctx.stroke();
}

/* 三角形を描く */
function drawAngle() {
    var canvas = document.getElementById('canvas3');
    var ctx = angle.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(100, 10);
    ctx.lineTo(200, 100);
    ctx.lineTo(10, 200);
    ctx.closePath();
    ctx.stroke();
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>KidsLab LifeGame</title>
	<script src="main_shape.js"></script>
	<style>body{background:white;margin:0;padding:0;}</style>
	</head>

	<body>
	<canvas id="canvas1" width="140" height="140"></canvas>
	<canvas id="canvas2" width="140" height="140"></canvas>
	<canvas id="canvas3" width="400" height="200"></canvas>
	</body>

	</html>
	window.onload = function() {
	drawRect();
	drawCircle();
	drawAngle();
	}

	/* 長方形を描く */
	function drawRect() {
	var canvas = document.getElementById('canvas1');
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillRect(20, 20, 80, 40);
	}


	/* 円を描く */
	function drawCircle() {
	var canvas = document.getElementById('canvas2');
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.arc(70, 70, 60, 0, Math.PI*2, false);
	ctx.stroke();
	}

	/* 三角形を描く */
	function drawAngle() {
	var canvas = document.getElementById('canvas3');
	var ctx = angle.getContext('2d');
	ctx.beginPath();
	ctx.moveTo(100, 10);
	ctx.lineTo(200, 100);
	ctx.lineTo(10, 200);
	ctx.closePath();
	ctx.stroke();
	}