Skip to content

Instantly share code, notes, and snippets.

@AlexHannigan

AlexHannigan/gist:4065437

Created November 13, 2012 12:09
Show Gist options
  • Save AlexHannigan/4065437 to your computer and use it in GitHub Desktop.
Save AlexHannigan/4065437 to your computer and use it in GitHub Desktop.
Download ZIP
Shapes drawn in HTML5 canvas
Raw
gistfile1.html
<!doctype html>
<html lang="en">
<head>
<title>HTML 5: Drawing shapes</title>
<script type="text/javascript">
function degToRad(deg){
var rad = (deg * Math.PI)/180;
return rad;
}
function radToDeg(rad){
var deg = (rad * 180)/Math.PI;
return deg;
}
function init(){
//variables for arc
var x = 200;
var y = 150;
var radius = 100;
var startAngle = degToRad(0);
var endAngle = degToRad(360);
var canvas = document.getElementById("canvas")
ctx = canvas.getContext("2d");
console.log(radToDeg(6.28));
//creating a fill and stroke style
ctx.fillStyle = "#0000FF";
ctx.strokeStyle = "#FF00FF";
ctx.lineWidth = 5;
//draw circles
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(x + 20, y + 20, radius - 5, startAngle, endAngle, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(x + 30, y + 30, radius - 10, startAngle, endAngle - degToRad(180), false);
ctx.fill();
ctx.stroke();
ctx.closePath();
//draw triangle
ctx.fillStyle = "#00F";
ctx.strokeStyle = "#F00";
ctx.lineWidth = 4;
ctx.beginPath();
//start from the top-left point
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(10, 100);
ctx.lineTo(10,10);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
</script>
</head>
<style type="text/css">
canvas {border: 1px solid black;}
</style>
<body onload="init()">
<canvas id="canvas" width="400" height="300" border="1">
Canvas is not supported
</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment