Untitled

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title> example </title>
  <script type="text/javascript">

	  function imageChoice (image) {
		switch (image) {
				case "Image 1":
					document.getElementById("dog").src="image1.jpg";
				document.getElementById("design").value="This is image 1";
					break;
			case "Image 2":
					document.getElementById("dog").src="image2.jpg";
				document.getElementById("design").value="This is image 2";
					break;
			case "Image 3":
					document.getElementById("dog").src="image3.jpg";
				document.getElementById("design").value="This is image 3";
					break;
			case "Image 4":
					document.getElementById("dog").src="image4.jpg";
				document.getElementById("design").value="This is image 4";
					break;
			//case "Enter URL of own image":
					//document.getElementById("nimg").src=window.URL(file)
			default:
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				var img = document.getElementById("dog");
				//var nimg = document.createElement("nimg");
				//nimg.src = window.URL.createObjectURL(file)
				ctx.drawImage(img,0,0,600,400);
				//ctx.drawImage(nimg,0,0,600,400);


		}
	  }
	  function drawText() {
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			var x = 300;
			var y = 200;

			ctx.font = "bold 36px sans-serif";
			ctx.fillStyle = "blue";
			$("#entertext").click(function(){
				ctx.fillText($("#words").val(), x, y);
			});
	  }

	</script>
</head>

<body>
<table>
<tr>
<td>
	<h2> Choose which image you would like to annotate </h2>
	  <p>
		<input type="button" value = "Image 1" onclick="imageChoice(value)">
		<input type="button" value = "Image 2" onclick="imageChoice(value)">
		<input type="button" value = "Image 3" onclick="imageChoice(value)">
	    <input type="button" value = "Image 4" onclick="imageChoice(value)">
	  </p>
		<p>
	      <input type="text" id="design" value="This is image 1">
	    <br> <br>
	      <img src="file:///C:/Users/sxj04m/WPS/image1.jpg" width="300" height="200" id="dog" alt "Image Choice 1">
	    <br> <br>
	    <input type="button" value="Use this image" onclick="imageChoice(value)">
	    <br>
	  <p/>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
<br>
<br>
	<canvas id="myCanvas" width="600" height="400" style="border:1px solid grey;">
	</canvas>
</td>
</tr>
</table>

</body></html>