jjhoncv/jsbin.bijoj.css

## jsbin.bijoj.css
/* Some HTML5 Tags
 */

aside, footer, header, nav, section {
  display: block;
}

/* Examples
 */

body {
  background-color: #bbb;
  color: #383838;
}

#canvas {
  background-color: #fff;
}

header {
  padding-bottom: 10px;
}

header a {
  color: #30f;
  text-decoration: none;
}

aside {
  padding-top: 6px;
}

/* Index page
 */

#index-body {
  background-color: #fdeba1;
  font-family: "Vollkorn", serif;
  color: #000;
}

#index-body a {
  text-decoration: none;
  color: #b30300;
}

#index-body #description, #index-body #exercises {
  overflow: auto;
  max-width: 900px;
  margin: 0px auto 20px auto;
  padding-left: 15px;
  padding-bottom: 15px;
  background-color: #fff;
  border-radius: 15px;
}

#index-body #description {
  margin-top: 40px;
}

#index-body h1 {
  color: #b30300;
}

#index-body #description h2 {
  margin-bottom: 0;
}

#index-body h1 a {
  text-decoration: underline;
  color: #b30300;
}

#index-body li h2, #index-body li h3, #index-body li h4 {
  color: #000;
}

#index-body li h3 {
  margin-bottom: 0px;
}

#index-body #description ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#index-body #description ul li {
 padding-bottom: 0.6em;
}
.container {
  display: table;
  width: 100%;
  height: auto;
}
.container .text {
    display:table-cell;
    height:100%;
    vertical-align:middle;
}
.container img {
  padding: 0 20px;
  display: block;
  float: right;
}
.container .clear {
  clear: both;
}

#exercises ul {
  margin: 0;
  padding: 4px 20px 10px 20px;
}

#exercises ol {
  margin: 0 20px 10px 0;
  padding: 0;
  list-style-type: none;
}

#exercises ol li {
  padding-top: 5px;
}

#exercises ol ol ol {
  padding-left: 60px;
  list-style-type: decimal-leading-zero;
}

#exercises ol ol ol li img, #exercises ol ol li img {
  margin-left: 4px;
  margin-bottom: -10;
}

#exercises h2 {
  margin: 10px 0 0 0;
}

## jsbin.bijoj.html
<!doctype html>

<html>

 <head>

 <meta charset="utf-8">

 <title>Velocity 1</title>

 <link rel="stylesheet" href="style.css">

 </head>

 <body>

 <canvas id="canvas" width="400" height="400"></canvas>
</body>

</html>

## jsbin.bijoj.js
function Ball (radius, color) {

 if (radius === undefined) { radius = 40; }

 if (color === undefined) { color = "#ff0000"; }

 this.x = 0;

 this.y = 0;

 this.radius = radius;

 this.rotation = 0;

 this.scaleX = 1;

 this.scaleY = 1;

 this.color = "#ff0000";

 this.lineWidth = 1;

}

Ball.prototype.draw = function (context) {

 context.save();

 context.translate(this.x, this.y);

 context.rotate(this.rotation);

 context.scale(this.scaleX, this.scaleY);

 context.lineWidth = this.lineWidth;

 context.fillStyle = this.color;

 context.beginPath();

 //x, y, radius, start_angle, end_angle, anti-clockwise

 context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);

 context.closePath();

 context.fill();

 if (this.lineWidth > 0) {

 context.stroke();

 }

 context.restore();

};
window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          ball = new Ball(),
          vx = Math.random() * 10 - 5,
          vy = Math.random() * 10 - 5,
          bounce = -0.7,
          gravity = 0.1;

      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

        var left = 0,
            right = canvas.width,
            top = 0,
            bottom = canvas.height;

        vy += gravity;
        ball.x += vx;
        ball.y += vy;

        if (ball.x + ball.radius > right) {
          ball.x = right - ball.radius;
          vx *= bounce;
        } else if (ball.x - ball.radius < left) {
          ball.x = left + ball.radius;
          vx *= bounce;
        }
        if (ball.y + ball.radius > bottom) {
          ball.y = bottom - ball.radius;
          vy *= bounce;
        } else if (ball.y - ball.radius < top) {
          ball.y = top + ball.radius;
          vy *= bounce;
        }
        ball.draw(context);
      }());
    };
	/* Some HTML5 Tags
	*/

	aside, footer, header, nav, section {
	display: block;
	}

	/* Examples
	*/

	body {
	background-color: #bbb;
	color: #383838;
	}

	#canvas {
	background-color: #fff;
	}

	header {
	padding-bottom: 10px;
	}

	header a {
	color: #30f;
	text-decoration: none;
	}

	aside {
	padding-top: 6px;
	}

	/* Index page
	*/

	#index-body {
	background-color: #fdeba1;
	font-family: "Vollkorn", serif;
	color: #000;
	}

	#index-body a {
	text-decoration: none;
	color: #b30300;
	}

	#index-body #description, #index-body #exercises {
	overflow: auto;
	max-width: 900px;
	margin: 0px auto 20px auto;
	padding-left: 15px;
	padding-bottom: 15px;
	background-color: #fff;
	border-radius: 15px;
	}

	#index-body #description {
	margin-top: 40px;
	}

	#index-body h1 {
	color: #b30300;
	}

	#index-body #description h2 {
	margin-bottom: 0;
	}

	#index-body h1 a {
	text-decoration: underline;
	color: #b30300;
	}

	#index-body li h2, #index-body li h3, #index-body li h4 {
	color: #000;
	}

	#index-body li h3 {
	margin-bottom: 0px;
	}

	#index-body #description ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}

	#index-body #description ul li {
	padding-bottom: 0.6em;
	}
	.container {
	display: table;
	width: 100%;
	height: auto;
	}
	.container .text {
	display:table-cell;
	height:100%;
	vertical-align:middle;
	}
	.container img {
	padding: 0 20px;
	display: block;
	float: right;
	}
	.container .clear {
	clear: both;
	}

	#exercises ul {
	margin: 0;
	padding: 4px 20px 10px 20px;
	}

	#exercises ol {
	margin: 0 20px 10px 0;
	padding: 0;
	list-style-type: none;
	}

	#exercises ol li {
	padding-top: 5px;
	}

	#exercises ol ol ol {
	padding-left: 60px;
	list-style-type: decimal-leading-zero;
	}

	#exercises ol ol ol li img, #exercises ol ol li img {
	margin-left: 4px;
	margin-bottom: -10;
	}

	#exercises h2 {
	margin: 10px 0 0 0;
	}
	<!doctype html>

	<html>

	<head>

	<meta charset="utf-8">

	<title>Velocity 1</title>

	<link rel="stylesheet" href="style.css">

	</head>

	<body>

	<canvas id="canvas" width="400" height="400"></canvas>
	</body>

	</html>
	function Ball (radius, color) {

	if (radius === undefined) { radius = 40; }

	if (color === undefined) { color = "#ff0000"; }

	this.x = 0;

	this.y = 0;

	this.radius = radius;

	this.rotation = 0;

	this.scaleX = 1;

	this.scaleY = 1;

	this.color = "#ff0000";

	this.lineWidth = 1;

	}

	Ball.prototype.draw = function (context) {

	context.save();

	context.translate(this.x, this.y);

	context.rotate(this.rotation);

	context.scale(this.scaleX, this.scaleY);

	context.lineWidth = this.lineWidth;

	context.fillStyle = this.color;

	context.beginPath();

	//x, y, radius, start_angle, end_angle, anti-clockwise

	context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);

	context.closePath();

	context.fill();

	if (this.lineWidth > 0) {

	context.stroke();

	}

	context.restore();

	};
	window.onload = function () {
	var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	ball = new Ball(),
	vx = Math.random() * 10 - 5,
	vy = Math.random() * 10 - 5,
	bounce = -0.7,
	gravity = 0.1;

	ball.x = canvas.width / 2;
	ball.y = canvas.height / 2;

	(function drawFrame () {
	window.requestAnimationFrame(drawFrame, canvas);
	context.clearRect(0, 0, canvas.width, canvas.height);

	var left = 0,
	right = canvas.width,
	top = 0,
	bottom = canvas.height;

	vy += gravity;
	ball.x += vx;
	ball.y += vy;

	if (ball.x + ball.radius > right) {
	ball.x = right - ball.radius;
	vx *= bounce;
	} else if (ball.x - ball.radius < left) {
	ball.x = left + ball.radius;
	vx *= bounce;
	}
	if (ball.y + ball.radius > bottom) {
	ball.y = bottom - ball.radius;
	vy *= bounce;
	} else if (ball.y - ball.radius < top) {
	ball.y = top + ball.radius;
	vy *= bounce;
	}
	ball.draw(context);
	}());
	};