Skip to content

Instantly share code, notes, and snippets.

@sergiopvilar

sergiopvilar/canvas.html

Created September 4, 2012 03:30
Show Gist options
  • Save sergiopvilar/3616238 to your computer and use it in GitHub Desktop.
Save sergiopvilar/3616238 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas.html
<!DOCTYPE html>
 
<html>
        <head>
                <title>Learning the basics of canvas</title>
                <meta charset="utf-8">
 
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <style type="text/javascript">
#myCanvas{
width: 100%;
height: 200%;
}
</style>
                <script type="text/javascript">
                        $(document).ready(function() {
  var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
i = 0;
var y = 0;
z = 0;
for (i=1;i<100;i++) {
setTimeout(function(){
z++;
context.beginPath(); // Start the path
context.arc(230, z*10, 3, 0, Math.PI*2, false); // Draw a circle
context.closePath(); // Close the path
context.fill(); // Fill the path*/
}, i*100);
}
                        });
                </script>
        </head>
 
        <body>
                <canvas id="myCanvas" width="500" height="500">
                        <!-- Insert fallback content here -->
                </canvas>
        </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment