Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Random Bouncing Ball</title>
<style type="text/css">
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }
​
#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
</style>
<script type="text/javascript">
function myFunction () {
​
        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            context= myCanvas.getContext('2d');
            context.clearRect(0,0,400,400);
            context.beginPath();
            context.fillStyle="#000000";
            context.arc(x,y,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
            if( x<0 || x>400)
            dx=-dx;
            if( y<0 || y>300)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
        setInterval(draw,10); 
}
</script>
​
</head>
<body>
​
<div id="container">
​
    <canvas id="myCanvas" width="400" height="300"></canvas>
​
​
​
</div>
<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>
​
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers