Finish the code at left so that a small (11 pixel wide) square is drawn at the mouse location each time the mouse is clicked.

javascript programming
mouse_01

​x
 
1
<html>
2
<head>
3
<title>Mouse 01</title>
4
<script>
5
​
6
  function init() {
7
    var canv = document.getElementById("canv");
8
    var ctx = canv.getContext("2d");
9
    ctx.clearRect(0,0,300,200);
10
    canv.addEventListener("mousedown",myMouseDownFunction);
11
  }
12
​
13
  function drawNewSquare(x,y) {
14
    var canv = document.getElementById("canv");
15
    var ctx = canv.getContext("2d");
16
    // Code to draw square here
17
  }
18
19
  function myMouseDownFunction(event) {
20
    // If we need to draw a square, figure out where, and get it done
21
  }
22
23
</script>
24
</head>
25
<body onload="init();">
26
<h3>Your Canvas</h3>
27
<canvas id="canv" width="300" height="200" style="border:1px gray solid;">
28
</canvas>
29
<h3>Example Solution</h3>
30
<p>Not available</p>
31
</body>
32
</html>