<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
umebosi(context,100,100);
umebosi(context,300,400);
context.stroke();
}
function umebosi(context,x,y){
context.moveTo(x, y);
context.lineTo(x+120, y);
context.lineTo(x+20, y+80);
context.lineTo(x+60, y-50);
context.lineTo(x+80, y+80);
context.lineTo(x, y);
}
</script>
</head>
<body onload="draw()" style="background-color:#a5d0c5;">
<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
<div>線を引く</div>
</body>
</html>
