Paths

closePath();

Cierra una figura creando un trazo del primer punto al último, cerrando la figura.

fill();

Rellena una figura.

Ejemplos:

          // Path
          ctx.beginPath();
          ctx.moveTo(50, 100);
          ctx.lineTo(100, 50);
          ctx.lineTo(150, 100);
          ctx.lineTo(100, 150);
          ctx.stroke();

          ctx.beginPath();
          ctx.moveTo(200, 100);
          ctx.lineTo(250, 50);
          ctx.lineTo(300, 100);
          ctx.lineTo(250, 150);
          ctx.closePath();
          ctx.stroke();

          // Con closePath
          ctx.beginPath();
          ctx.moveTo(350, 100);
          ctx.lineTo(400, 50);
          ctx.lineTo(450, 100);
          ctx.lineTo(400, 150);
          ctx.fill();
          ctx.closePath();
          ctx.stroke();

          // Sin closePath
          ctx.beginPath();
          ctx.moveTo(350, 200);
          ctx.lineTo(400, 250);
          ctx.lineTo(450, 300);
          ctx.lineTo(400, 350);
          ctx.fill();
          ctx.stroke();