title: Javascript - Canvas, How To make ball travel in zig zag
body: <p>Hey Guys I am having a problem with some JavaScript on a Canvas. Basically, I cant figure out how to make the ball travel in a zig zag. I am new to JavaScript and still learning it so if any of you guys could help me it would be greatly appreciated. So my question is how would I go about making the ball travel in a zig zag? Currently it just does a straight line from left to right.</p>
  
  <p>Here is my Code    </p>
  
  <pre><code>// JavaScript Document
  window.addEventListener('load', eventWindowLoaded, false); 
  
  function eventWindowLoaded() {
      canvasApp(); 
  }
  
  function canvasSupport () { 
      return Modernizr.canvas;
  }
  
  function canvasApp() {
  
      // test if Modernizr has been loaded
      if (!canvasSupport()) { 
          return; 
      }
  
      var pointImage = new Image(); 
      // put an image into an image object
      pointImage.src = "point.png"; 
  
      function drawScreen () {
  
          // fill the background
          context.fillStyle = '#EEEEEE';
          context.fillRect(0, 0, theCanvas.width, theCanvas.height);
          // Draw  a Box around the fill
          context.strokeStyle = '#000000';
          context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height-2);
  
          // Create ball
  
          if (moves &gt; 0 ) { 
              moves--; 
              ball.x += xunits; 
              ball.y += yunits;
          }
  
          // Draw points to illustrate path
  
          points.push({
              x: ball.x,
              y:ball.y
          });
  
          // for loop with drawImage inside the loop to draw the points
  
          for (var i = 0; i &lt; points.length; i++) { 
              context.drawImage(pointImage, points[i].x, points[i].y, 1, 1);
          }
          context.fillStyle = "#000000"; 
          context.beginPath();
          context.arc(ball.x, ball.y, ball_radius, 0, Math.PI * 2, true);
          context.closePath();
          context.fill();
      }
  
      var speed = 10;
      // coordinates of the left hand point
      var p1 = {
          x: 20,
          y: 250
      }; 
      var p2 = {
          x: 480,
          y: 250
      };
      // distance between left and right x coordinates
      var dx = p1.x - p2.x; 
      var dy = p1.y - p2.y;
      // Calculate the distance between points
      var distance = Math.sqrt(dx * dx + dy * dy);
      var moves = distance / speed;
      var xunits = (p2.x - p1.x) / moves;
      var yunits = (p2.y - p1.y) / moves;
      var ball = {
          x: p1.x, 
          y: p1.y
      };
      var points = new Array();
      var the_interval = 20
      var ball_radius = 5
  
      // save the context in a variable
      theCanvas = document.getElementById("canvasOne"); 
      context = theCanvas.getContext("2d");
  
      // call the drawscreen function every 33 miliseconds
      setInterval(drawScreen, the_interval); 
  
  }
  </code></pre>
  
  <p>I am using <a href="http://modernizr.com/" rel="nofollow">Modernizr</a> to help me with this.</p>