Skip to content

Instantly share code, notes, and snippets.

@mnemnion

mnemnion/circles.html

Created January 25, 2013 23:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mnemnion/4638996 to your computer and use it in GitHub Desktop.
Save mnemnion/4638996 to your computer and use it in GitHub Desktop.
Download ZIP
A little ditty that renders a Chakra 12 board in canvas.
Raw
circles.html
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var canvasWidth = parseInt(canvas.getAttribute("width"));
var canvasHeight = parseInt(canvas.getAttribute("height"));
var rds = canvasWidth/4;
ctx.beginPath();
ctx.arc(canvasWidth/2,canvasHeight/2,canvasWidth/2,0,Math.PI*2,true);
ctx.stroke();
for(i=0;i<=12;i++) {
ctx.beginPath();
ctx.arc(canvasWidth/2+(rds*Math.cos(2*Math.PI*i/12)),
canvasWidth/2+(rds*Math.sin(2*Math.PI*i/12)),rds,0,Math.PI*2,true);
ctx.stroke();
}
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment