can't specify a canvas created through javascript as a drop area
===

I have created two canvases in a div using javascript. I have another div with an image. I want to drop that image into the canvas. But I am getting error in adding events to the canvases. I am trying to set the events "ondragover" and "ondrop". But I am getting the error that event is not defined. 

Here is my code,

    <html>
        <head> 
        <script type="text/javascript">
    
        function dragIt(theEvent) {
    theEvent.dataTransfer.setData("Text", theEvent.target.id);   
    }
    
    function dropIt(theEvent) {
    var theData = theEvent.dataTransfer.getData("Text");
    dt = document.getElementById(theData);
    theEvent.preventDefault();  
    }    
        
    window.onload = function() {     
      var c2 = document.createElement('canvas');
      c2.width = 140;
      c2.height = 140;
      c2.style.cssText = 'position:relative;top:70px;left:498px;border:2px  solid black;';
      var ctx2 = c2.getContext('2d');    
      document.body.appendChild(c2);
      c2.ondragover=event.preventDefault();
      c2.ondrop=dropIt(event);
        
      
      var c3 = document.createElement('canvas');
      c3.width = 140;
      c3.height = 140;
      c3.style.cssText = 'position:relative;top:70px;left:502px; border:2px  solid black;';
      var ctx3 = c3.getContext('2d');
      document.body.appendChild(c3);     
          
      };  
    </script>
    
    </head>
        <body>
        <div class="pics">
        <div id="place1">
        <img src="images/211.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />
        </div>   
        <div style = "position:absolute;top:150px;width:300;height:400;left:500px; border:2px  solid black;"></div>
        </body>
    </html>