<!DOCTYPE html>
<html>
<body>
<!--
<canvas>要素を2つ追加し、各キャンバスに個別のid を割り当てます。
これにより、JavaScript から個別に参照できるようになります。
-->
<!-- 描画用のキャンバス要素を作成する -->
<canvas id="myCanvas" style="border:1px solid black;"></canvas>
<!-- 新しいキャンバス要素を追加する -->
<canvas id="mySecondCanvas" style="border:1px solid black;"></canvas>
<script>
// 既存のキャンバス要素のためのスクリプト
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.strokeStyle = 'blue';
context.lineWidth = 3;
context.beginPath();
context.moveTo(200, 10);
context.lineTo(50, 100);
context.stroke();
// 新しいキャンバス要素のためのスクリプト
var secondCanvas = document.getElementById('mySecondCanvas');
var secondContext = secondCanvas.getContext('2d');
secondContext.strokeStyle = 'red';
secondContext.lineWidth = 3;
secondContext.beginPath();
secondContext.moveTo(200, 10);
secondContext.lineTo(50, 100);
secondContext.stroke();
</script>
</body>
</html>