title: How do I take code from Codepen, and use it locally?
body: <p>How do I take the code from codepen, and use it locally in my text-editor?</p>
  
  <p><a href="http://codepen.io/mfields/pen/BhILt">http://codepen.io/mfields/pen/BhILt</a></p>
  
  <p>I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt; src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="celtic.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css"  src="celtic.css"&gt;&lt;/link&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="animation" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.</p>
  
  <p>I have also included the jquery library as I understand a lot of the codepen creations use it.</p>
  
  <p>The only console error I'm getting is </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'getContext' of null
  </code></pre>
  
  <p>which is linking to my js file, line 4</p>
  
  <pre><code>(function(){
  
  var canvas = document.getElementById( 'animation' ),
      c = canvas.getContext( '2d' ),
  </code></pre>
  
  <p>Sorry if this is dumb, but I'm new to all this.
  I'm sure this is basic as hell. Any help would be awesome!</p>