bryckbost/canvas_test.html

## canvas_test.html
<!DOCTYPE>
<html>
 <head>
  <script type="application/javascript">

  //   https://developer.mozilla.org/en/Canvas_tutorial

  function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas) {
      var ctx = canvas.getContext("2d");

      // top border
      ctx.fillStyle = "#FF973A";
      // fillRect(x, y, width, height)
      ctx.fillRect (0, 0, 330, 1);

      // Create gradients
      // createLinearGradient(x1,y1,x2,y2)
      var lingrad = ctx.createLinearGradient(0,1,0,60);

      // addColorStop(position, color) position = 0.0 and 1.0
      lingrad.addColorStop(0, '#e4611f');
      lingrad.addColorStop(1, '#a8361f');

      // assign gradients to fill and stroke styles
      ctx.fillStyle = lingrad;

      // Filled rect with a triangle cap
      ctx.beginPath();

      // moveTo(x, y)
      ctx.moveTo(0,1);

      // lineTo(x, y)
      ctx.lineTo(330,1);
      ctx.lineTo(348,30);
      ctx.lineTo(330,60);
      ctx.lineTo(0, 60);
      ctx.lineTo(0,1);

      // fill the shape
      ctx.fill();
    }
  }
  </script>

  <style type="text/css" media="screen">
    body {
      background: #222;
    }
  </style>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="350" height="60"></canvas>
 </body>
</html>
	<!DOCTYPE>
	<html>
	<head>
	<script type="application/javascript">

	// https://developer.mozilla.org/en/Canvas_tutorial

	function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas) {
	var ctx = canvas.getContext("2d");

	// top border
	ctx.fillStyle = "#FF973A";
	// fillRect(x, y, width, height)
	ctx.fillRect (0, 0, 330, 1);

	// Create gradients
	// createLinearGradient(x1,y1,x2,y2)
	var lingrad = ctx.createLinearGradient(0,1,0,60);

	// addColorStop(position, color) position = 0.0 and 1.0
	lingrad.addColorStop(0, '#e4611f');
	lingrad.addColorStop(1, '#a8361f');

	// assign gradients to fill and stroke styles
	ctx.fillStyle = lingrad;

	// Filled rect with a triangle cap
	ctx.beginPath();

	// moveTo(x, y)
	ctx.moveTo(0,1);

	// lineTo(x, y)
	ctx.lineTo(330,1);
	ctx.lineTo(348,30);
	ctx.lineTo(330,60);
	ctx.lineTo(0, 60);
	ctx.lineTo(0,1);

	// fill the shape
	ctx.fill();
	}
	}
	</script>

	<style type="text/css" media="screen">
	body {
	background: #222;
	}
	</style>
	</head>
	<body onload="draw();">
	<canvas id="canvas" width="350" height="60"></canvas>
	</body>
	</html>