const TWO_PI = Math.PI * 2;

const THREE_PI = 3 * Math.PI;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

const halfWidth = (canvas.width = 250) / 2;

const halfHeight = (canvas.height = 250) / 2;

const scale = 10;

c.fillStyle = '#f0e195';

c.strokeStyle = '#c2a272';

c.beginPath();

for (let theta = 0; theta <= TWO_PI; theta += 0.02) {

  const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);

  const y = THREE_PI * Math.sin(theta);

  c.lineTo(halfWidth + x * scale, halfHeight - y * scale);

}

c.fill();

c.stroke();