title: JavaScript: How to recreate "Animate Your Name" lesson from Codecademy?
body: <p>The Codecademy website has a lesson where the user can <a href="http://www.codecademy.com/goals/animate-your-name" rel="nofollow">learn to <strong>create an animated name</strong> on a canvas element using JavaScript</a>. I've been trying to recreate the result for months, but nothing I've tried has gotten me anywhere close to what I'm looking for.</p>
  
  <hr>
  
  <p>Below is the HTML and JavaScript used in the lesson (Link here: <a href="http://www.codecademy.com/goals/animate-your-name" rel="nofollow">http://www.codecademy.com/goals/animate-your-name</a>). This works, albeit <em>only</em> at the Codecademy website.</p>
  
  <h2>JavaScript:</h2>
  
  <p><strong>Note 1</strong>: this version of the JS is <em>slightly</em> modified from the original.</p>
  
  <p><strong>Note 2</strong>: the filename for this JavaScript is <strong><code>main.js</code></strong>.</p>
  
  <pre><code>var red = [359, 100, 29.8];
  var orange = [40, 100, 60];
  var green = [75, 100, 40];
  var blue = [196, 77, 55];
  var purple = [280, 50, 60];
  var bluefield = [199, 100, 22.9];
  
  var myName = "Bluefield";
  var letterColors = [bluefield,red];
  var bubbleShape = "square";
  
  drawName(myName, letterColors);
  bounceName();
  bounceBubbles();
  </code></pre>
  
  <h2>HTML (full):</h2>
  
  <p><strong>Note</strong>: I had <em>not</em> seen this HTML until today (August 6, 2014).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
      &lt;script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Below is from a <strong>recent JSFiddle using similar code</strong> (Link here: <a href="http://jsfiddle.net/mnbishop017/cd7djy02/" rel="nofollow">http://jsfiddle.net/mnbishop017/cd7djy02/</a>). This <em>doesn't</em> work.</p>
  
  <h2>JavaScript</h2>
  
  <pre><code>var red = [359, 100, 29.8];
  var orange = [40, 100, 60];
  var green = [75, 100, 40];
  var blue = [196, 77, 55];
  var purple = [280, 50, 60];
  var bluefield = [199, 100, 22.9];
  
  var myName = "Bluefield";
  var letterColors = [bluefield,red];
  var bubbleShape = "square";
  
  drawName(myName, letterColors);
  bounceName();
  bounceBubbles();
  </code></pre>
  
  <h2>HTML (within 'body' tags):</h2>
  
  <pre><code>&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <h2>External Resources linked (Important!):</h2>
  
  <ul>
  <li><a href="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js" rel="nofollow">http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js</a> (from HTML of original lesson)</li>
  </ul>