Yin and Yang

/*Downloaded from https://www.codeseek.co/ScarpMetal/yin-and-yang-RpXmrb */
html, body {
  margin: 0;
}

/*Downloaded from https://www.codeseek.co/ScarpMetal/yin-and-yang-RpXmrb */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var cWidth;
var cHeight;

var size;
resizeCanvas();

function loop(){
	ctx.clearRect(0, 0, cWidth, cHeight);
	//ctx.bezierCurveTo(cWidth/4, cHeight/4, cWidth/4, 3*cHeight/4, cWidth/2, 3*cHeight/4);
	ctx.fillStyle = "tan";
	ctx.fillRect(0, 0, cWidth, cHeight);
	
	ctx.beginPath();
	ctx.moveTo(cWidth/2, (cHeight/2)+200);
	ctx.bezierCurveTo((cWidth/2)-267, (cHeight/2)+200, (cWidth/2)-267, (cHeight/2)-200, cWidth/2, (cHeight/2)-200);
	ctx.lineTo(cWidth/2, (cHeight/2)+200);
	ctx.fillStyle = "black";
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();
	ctx.moveTo(cWidth/2, (cHeight/2)+200);
	ctx.bezierCurveTo((cWidth/2)+267, (cHeight/2)+200, (cWidth/2)+267, (cHeight/2)-200, cWidth/2, (cHeight/2)-200);
	ctx.lineTo(cWidth/2, (cHeight/2)+200);
	ctx.fillStyle = "white";
	ctx.fill();
	ctx.closePath();
	
	
	ctx.beginPath();
	ctx.arc(cWidth/2, (cHeight/2)-100, 100, 0, 2*Math.PI);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();
	ctx.arc(cWidth/2, (cHeight/2)+100, 100, 0, 2*Math.PI);
	ctx.fillStyle = "black";
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();
	ctx.arc(cWidth/2, (cHeight/2)-100, 20, 0, 2*Math.PI);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();
	ctx.arc(cWidth/2, (cHeight/2)+100, 20, 0, 2*Math.PI);
	ctx.fillStyle = "white";
	ctx.fill();
	ctx.closePath();
}
loop();

$(window).on("resize", resizeCanvas);

function resizeCanvas(){
	//console.log("resized")
	canvas.height = $(window).height();
	canvas.width = $(window).width();
	cWidth = canvas.width;
	cHeight = canvas.height;
	//console.log("cHeight: " + cHeight + "  cWidth: " + cWidth)
	loop();
}