Drawing HTML5 Up and Down Arrows

canvas_arrows.html

<p>
	<canvas id="downArrow" style="border:0px solid;background-color:#ffecb0;" width="20" height="22">Your web browser does not supports HTML5!</canvas>
	<canvas id="upArrow" style="border:0px solid;background-color:#ffecb0;" width="20" height="22">Your web browser does not supports HTML5!</canvas>
</p> 

<script type="text/javascript" charset="utf-8">
	function drawDownArrow() {
	  var canvas = document.getElementById('downArrow');
	  var context = canvas.getContext('2d');
	  context.lineWidth = 1;
	 	context.fillStyle = "#f88f32";
    context.beginPath();
		context.moveTo(10 - 3, 10 - (3 + 5));
    context.lineTo(10 + 3, 10 - (3 + 5));
    context.lineTo(10 + 3, 10 - (3 - 5));
    context.lineTo(10 + 7, 10 - (3 - 5));
    context.lineTo(10 + 0, 10 - (3 - 13));
    context.lineTo(10 - 7, 10 - (3 - 5));
    context.lineTo(10 - 3, 10 - (3 - 5));
    context.lineTo(10 - 3, 10 - (3 + 5));
    context.fill();
	}
	function drawUpArrow() {
	  var canvas = document.getElementById('upArrow');
	  var context = canvas.getContext('2d');
	  context.lineWidth = 1;
	 	context.fillStyle = "#f88f32";
    context.beginPath();
		
		// This will rotate the downArrow 180 degrees (PI)
		context.save();
		context.translate(15, 15);
		context.rotate(Math.PI);
		context.translate(-5,-6)

		// Draw same arrow as down arrow
		context.moveTo(10 - 3, 10 - (3 + 5));
    context.lineTo(10 + 3, 10 - (3 + 5));
    context.lineTo(10 + 3, 10 - (3 - 5));
    context.lineTo(10 + 7, 10 - (3 - 5));
    context.lineTo(10 + 0, 10 - (3 - 13));
    context.lineTo(10 - 7, 10 - (3 - 5));
    context.lineTo(10 - 3, 10 - (3 - 5));
    context.lineTo(10 - 3, 10 - (3 + 5));
    context.fill();
	}
	window.addEventListener("load", drawDownArrow, true);
	window.addEventListener("load", drawUpArrow, true);
</script>