Skip to content

Instantly share code, notes, and snippets.

@kevinfjbecker

kevinfjbecker/arrow.html

Created July 27, 2011 10:08
Show Gist options
  • Save kevinfjbecker/1109066 to your computer and use it in GitHub Desktop.
Save kevinfjbecker/1109066 to your computer and use it in GitHub Desktop.
Download ZIP
Page to display an arrow drawn with the HTML5 canvas api
Raw
arrow.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Arrow</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="arrow.js"></script>
</body>
</html>
Raw
arrow.js
(function () {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(75, 75);
ctx.lineTo(72.5, 57.5);
ctx.lineTo(110, 65);
ctx.lineTo(110, 35);
ctx.lineTo(72.5, 42.5);
ctx.lineTo(75, 25);
ctx.closePath();
ctx.stroke();
ctx.fill();
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment