<!doctype html>

<!--15 11 1-->

<html>

<head>

	<title>Figure drawing</title>

	<meta charset="utf-8">

	<style type="text/css">

           body {font-size:18pt;background: linear-gradient(white,lightskyblue,violet,ivory)}

           input,button {font-size:16pt;}

      </style>

</head>


<body><div align=center>

<h2>canvasのクリックした点に図形を描く</h2>

<span onclick=fc()>

<form name=fm>

<input type=radio name="z" value=1>長方形

<input type=radio name="z" value=2>円

<input type=radio name="z" value=3>直線

　　　　<input type=radio name="r" value="red">赤

<input type=radio name="r" value="lightgreen">緑

<input type=radio name="r" value="blue">青

<input type=radio name="r" value="violet">紫

<input type=radio name="r" value="cyan">シアン<br>

　　　x = <input type=text name=a size=5>

y = <input type=text name=b size=5>

　　　　
</form>

</span>


<span onclick=epos()><canvas width="900" height="450" id="sample" style="background-color:yellow;" >

</canvas></span><br>

<input type=button value="消去" onclick=vn()>

</div>


<script type="text/javascript">


var cl;

var z;

var canvas = document.getElementById('sample');

 var context = canvas.getContext( '2d' );

 
//色　図形の取得

function fc(){

  cl=fm.r.value

  z=fm.z.value

}

//消去

function vn(){

  alert("消すでぇ～");

  fm.a.value=""; fm.b.value=""; 

  context.beginPath();

  context.clearRect(0, 0, 900, 450);

  
}

//

function epos(){

//var canvas = document.getElementById('sample');

 x=window.event.pageX- canvas.offsetLeft;

 y=window.event.pageY- canvas.offsetTop;

 //  var context = canvas.getContext( '2d' );

  context.fillStyle =cl;

 fm.a.value=x; fm.b.value=y; 

 fm.a.color=cl; fm.b.color=cl

 if (z==1){

   //矩形を描く

   context.beginPath();

   context.fillRect(x, y, 150, 100);

    context.fill();

}

  else if(z==2){

   //円を描く

    context.beginPath();

   context.arc( x, y, 15, 0, 2 * Math.PI ,true);

    context.fill();

 }

 else if(z==3){

  //直線

   // context.arc( x, y, 1, 0, 2 * Math.PI ,true);

    context.strokeStyle =cl;

    context.beginPath();

     context.moveTo(sample.width/2, sample.height/2);

     context.lineTo(x, y);

   //   x1=x;y1=y;context.moveTo(x1,y1);

  //  context.lineTo(x, y);

    context.stroke();

  }


}


</script>

</body>

</html>