playing with canvas

by Sarah Giles

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes -->


 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>

JavaScript

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
   	ctx.beginPath();
  	ctx.moveTo(0,30);
    ctx.quadraticCurveTo(20, 30, 30, 0);      					
    ctx.lineTo(32,0);
    ctx.quadraticCurveTo(20, 32, 32, 30);
		ctx.lineTo(150,30);
		ctx.lineTo(0,30);
		ctx.fill();

	}
}