jjhoncv/jsbin.bijoj.css

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

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

/* Examples
 */

body {
  background-color: #bbb;
  color: #383838;
  text-align: center;
}

canvas {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
  padding-bottom: 10px;
}

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

aside {
  padding-top: 6px;
}

/* Index page
 */

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

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

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

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

#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;
}

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

#description iframe {
  float: right;
  margin: 15px 0 15px 15px;
}

#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 = 1;

 ball.x = 50;

 ball.y = 100;

 (function drawFrame () {

 window.requestAnimationFrame(drawFrame, canvas);

 context.clearRect(0, 0, canvas.width, canvas.height);

 ball.x += vx;

 ball.draw(context);

 }());

 };
	/* Some HTML5 Tags
	*/

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

	/* Examples
	*/

	body {
	background-color: #bbb;
	color: #383838;
	text-align: center;
	}

	canvas {
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.1);
	}

	header {
	padding-bottom: 10px;
	}

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

	aside {
	padding-top: 6px;
	}

	/* Index page
	*/

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

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

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

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

	#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;
	}

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

	#description iframe {
	float: right;
	margin: 15px 0 15px 15px;
	}

	#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 = 1;

	ball.x = 50;

	ball.y = 100;

	(function drawFrame () {

	window.requestAnimationFrame(drawFrame, canvas);

	context.clearRect(0, 0, canvas.width, canvas.height);

	ball.x += vx;

	ball.draw(context);

	}());

	};