sine wave 2

HTML

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;
var counter = 0, x=0,y=180;

function drawShape(ctx, xoff, yoff) {
  ctx.beginPath();
  ctx.moveTo(0, 360);
  ctx.bezierCurveTo(
110 + xoff, 355 + yoff, 
120 + xoff, 350 + yoff, 
150 + xoff, 340 + yoff);
  ctx.bezierCurveTo(
175 + xoff, 310 + yoff,
185 + xoff, 310 + yoff, 
230 + xoff, 340 + yoff);
  ctx.bezierCurveTo(
360 - 120 + xoff, 350 + yoff, 
360 - 110 + xoff, 355 + yoff, 
360 + xoff, 360 + yoff);
}

drawShape(ctx, 0, 0);
ctx.fill();
ctx.fillStyle = "#FF0000";
ctx.fillRect(150, 300, 5, 5);