如何讓我的繪畫放在帆布的第一個計劃？

當我需要他在前面產卵時，這個藍色圓圈會在那裏產卵。什麼可能是錯誤的？是否因爲畫布背景僅加載onmouseover？或者因爲它是隨機的，或者因爲網格本身不像畫布那麼大？我很困惑。如何讓我的繪畫放在帆布的第一個計劃？

<!doctype html> 
<html> 
    <head> 
    <title>Ussi l6una</title> 
    <script> 
     var kohad=new Array(); 
     var pikkus=1, d=6, kogus=300; 

     var ballx=0, step=100; 
     var bally=0, step=100; 
     var monsterx=(step*parseInt(5*Math.random())), step=100; 
     var monstery=(step*parseInt(5*Math.random())); 


      function toit(){ 
      var c=document.getElementById("tahvel"); 
      var ctx=c.getContext("2d"); 
      ctx.beginPath(); 
      ctx.fillStyle = 'darkblue'; 
      ctx.arc(monsterx+10, monstery+10, 25, 0, 2 * Math.PI, false); 
      ctx.fill(); 
      ctx.lineWidth = 0; 
      ctx.strokeStyle = '#000000'; 
      } 

      function devouring(){ 
      if(monsterx==ballx && bally==monstery){ 
       monsterx=step*parseInt(5*Math.random()); 
       monstery=step*parseInt(5*Math.random()); 
       toit(); 
       cnt++; 
       punktid(); 
      } 
      } 

     function looKohad(){ 
     for(var i=0; i<kogus; i++){ 
      kohad[i]=new Array(pikkus*i, 1200); 
     } 
     } 

     function arvutaUusTagumine(eesmine, tagumine){ 
     var kaugus=new Array(); 
     kaugus[0]=eesmine[0]-tagumine[0]; 
     kaugus[1]=eesmine[1]-tagumine[1]; 
     var kogukaugus=Math.sqrt(kaugus[0]*kaugus[0]+kaugus[1]*kaugus[1]); 
     var nihe=kogukaugus-pikkus; 
     var dx=kaugus[0]*nihe/kogukaugus; 
     var dy=kaugus[1]*nihe/kogukaugus; 
     return new Array(tagumine[0]+dx, tagumine[1]+dy);  
     } 

     function arvutaUuedKohad(){ 
     console.log(kohad); 
     for(var i=1; i<kogus; i++){ 
      kohad[i]=arvutaUusTagumine(kohad[i-1], kohad[i]); 
     } 
     } 

     function joonistaKohad(g){ 
     for(var i=0; i<kogus; i++){ 
      joonistaKoht(g, kohad[i]) 
     } 
     } 

     function joonistaKoht(g, koht){ 
     g.beginPath(); 
     g.arc(koht[0], koht[1], d, 0, 2*Math.PI, true); 
     g.stroke();  
     } 

     function hiirLiigub(e){ 
     var t=document.getElementById("tahvel"); 
     var g=t.getContext("2d"); 
     var tahvlikoht=t.getBoundingClientRect(); 
     kohad[0][0]=e.clientX-tahvlikoht.left; 
     kohad[0][1]=e.clientY-tahvlikoht.top; 
     arvutaUuedKohad(); 
     g.strokeStyle="#CC9966"; 
     g.fillStyle="#CC9966"; 
     g.clearRect(0, 0, t.width, t.height); 
     joonistaKohad(g); 
     } 
     looKohad(); 
    </script> 
    </head> 
    <body 
    onLoad="toit();"> 
    <canvas id="tahvel" width="800" height="800" 
      style="background-color:white" onmousemove="hiirLiigub(event)" onmouseover="this.style.backgroundImage = 'url(./dirt.png)'"></canvas><br /> 
    </body> 
</html>

來源

2013-11-27 Mister Bobo