const canvas = document.getElementById('curve');
const ctx = canvas.getContext('2d');
const w = 300; const h = 300;
const cx = w; const cy = h;
canvas.width = w * 2;
canvas.height = h * 2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';

ctx.clearRect(0, 0, w * 2, h * 2);
ctx.moveTo(cx, cy);
ctx.beginPath();

const fn = t => 
  1 - Math.cos(t) * Math.sin(3 * t);

Array.from(Array(630).keys())
  .forEach(idx => {
    const t = idx * 0.01;
    const r = w * 0.5 * fn(t);
    const x = cx + r * Math.cos(t);
    const y = cy + r * Math.sin(t);
    ctx.lineTo(x, y);
  });

ctx.strokeStyle = '#333';
ctx.lineWidth = 4;
ctx.lineJoin = 'round';
ctx.stroke();