var x = 400;
var y = 400;
var controlx = 200;
var controly = 10;
var endx = 400;
var endy = 200;

var x2 = 400;
var y2 = 400;
var controlx2 = 600;
var controly2 = 30;
var endx2 = 400;
var endy2 = 200;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.quadraticCurveTo(controlx2, controly2, x, y);
context.closePath();
context.lineWidth = 15;
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(100, 0, 0)';
context.stroke();