[Sweet]

это рисуется просто множеством .lineTo(x, y)

Т.е. уот так уот:

<canvas id="canvas" width="400" height="100"></canvas>

<script>

var context = canvas.getContext("2d");
var y0 = canvas.height / 2;

context.beginPath();
context.moveTo(0, y0);

for (var x = 0; x < canvas.width; x++) {
  var y = f(x);
  context.lineTo(x, y + y0);
}

context.stroke();


function f(x) {
  return Math.sin(x / 16) * 48;
}

</script>