Search code examples
javascriptcsshtmlhtml5-canvas

How do I take code from Codepen, and use it locally?

How do I take the code from codepen, and use it locally in my text-editor?

http://codepen.io/mfields/pen/BhILt

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.

<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css"  src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>

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.

I have also included the jquery library as I understand a lot of the codepen creations use it.

The only console error I'm getting is 

Uncaught TypeError: Cannot read property 'getContext' of null

which is linking to my js file, line 4

(function(){

var canvas = document.getElementById( 'animation' ),
    c = canvas.getContext( '2d' ),

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!

Solution

  • Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.