Skip to content

Instantly share code, notes, and snippets.

@kevinfjbecker
Created September 21, 2011 20:43
Show Gist options
  • Save kevinfjbecker/1233247 to your computer and use it in GitHub Desktop.
Save kevinfjbecker/1233247 to your computer and use it in GitHub Desktop.
HTML5 Canvas Line Graph
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Roulette</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<canvas id="c" width="500" height="375"></canvas>
<script src="graph.js"></script>
</body>
</html>
if (document.getElementById('c')) {
// context
var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");
// grid
for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);
}
for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
}
context.strokeStyle = "#eee";
context.stroke();
// axis
context.beginPath();
context.moveTo(0, 375 / 2);
context.lineTo(500, 375 / 2);
context.moveTo(60, 0);
context.lineTo(60, 27);
context.moveTo(60, 47);
context.lineTo(60, 375);
context.strokeStyle = "#000";
context.stroke();
// text
context.font = "bold 12px sans-serif";
context.fillText("plays", 248, 42);
context.fillText("winnings", 28, 42);
// graphing functons
var rouletteRed = (function() {
var winnings = 0;
return function() {
winnings += Math.random() < 18/38 ? 1 : -1;
return winnings;
};
})();
var roulette17 = (function() {
var winnings = 0;
return function() {
winnings += Math.random() < 1/38 ? 35 : -1;
return winnings;
};
})();
var lineGraph = function(o) {
context.beginPath();
context.moveTo(60, 375 / 2);
for(var i = 61; i < 500; i += 1) {
context.lineTo(i, -o.stepFunction() + 375 / 2);
}
context.strokeStyle = o.color;
context.stroke();
};
lineGraph({
'stepFunction': rouletteRed,
'color': '#e00'
});
lineGraph({
'stepFunction': roulette17,
'color': '#00e'
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment