canvas waves

by Sarah Giles

HTML

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

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

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(35,0);
    ctx.quadraticCurveTo(35, 30, 65, 30);
    
    ctx.quadraticCurveTo(85, 30, 95, 0);   
    ctx.lineTo(100,0);
    ctx.quadraticCurveTo(100, 30, 130, 30);


		ctx.lineTo(150,30);
		ctx.lineTo(0,30);
    
    
    
    
    
    
		ctx.fill();
  }
}