Untitled

<html>
     <head>
      <script type="application/javascript">
        window.addEventListener("load", start,false);
		var canvas=0;
		var ctx=0;
		var waarde1;
		var waarde2;
		var waarde3;
		var totaal;

        var timeOut;

		var middelpuntX;
		var middelpuntY;

		var doelX;
		var doelY;

        var dotNumber = 0;

		var i=0;
		var j=0;

		var offsetX=0;
		var offsetY=0;

		function start()
		{

		  canvas = document.getElementById("canvas");
		  ctx = canvas.getContext('2d');
		  canvas.addEventListener('mousedown', muis, false);

		  doelX = 0;
		  doelY = 0;


		}

		function muis(evt)
		{
            ctx.clearRect(0,0,canvas.width,canvas.height);
            if ( evt.layerX ||  evt.layerX == 0) {
                doelX = evt.layerX ;
                doelY = evt.layerY;
            } else if (evt.offsetX || evt.offsetX == 0) {
                doelX = evt.offsetX;
                doelY = evt.offsetY;
            }
            dotNumber = 0;
            timeOut = new Array();
            for(k = 0;k<8;k++){
                timeOut[k] = setTimeout(function(){
                    dotNumber++;
                    dotX = doelX + Math.cos(dotNumber*Math.PI/4) * 40;
                    dotY = doelY + Math.sin(dotNumber*Math.PI/4) * 40;
                    teken(dotX,dotY);
                },100*(k+1));

            }
		}


        function teken(X,Y)
		{


			ctx.fillStyle = "red";
			ctx.beginPath();


            ctx.arc(X,Y,10,2*Math.PI,false);


			ctx.fill();


		}


      </script>
     </head>
     <body>
       <canvas id="canvas" width="1200" height="400"></canvas>

     </body>