How to create multiple instances of the same shape in HTML canvas?
<p>I'm trying to create a canvas with several triangles all over the place.</p>

<p>I would like to create a class of a path in order to instantiate it multiple times. I've tried that:</p>

<pre><code>class Triangle {

  constructor( x = 0, y = 0 ) {

    // Get context from the global variable 'ctx'
    this.ctx = ctx;

    // Draw triangle
    this.ctx.beginPath();
      this.ctx.lineTo( 0  , 0   );
      this.ctx.lineTo( 80 , 80  );
      this.ctx.lineTo( 0  , 160 );
      this.ctx.moveTo( x  , y   );
    this.ctx.closePath();

    // Place color
    this.ctx.fillStyle = '#000';
    this.ctx.fill();
  }
}
</code></pre>

<p>Unfortunately if I do that it works just with the first element. Meaning that the result is two triangles on 0,0 position...</p>

<pre><code>var T1 = new Triangle( 0, 0 );
var T2 = new Triangle( 10, 10 );
</code></pre>

<p>How can I create multiple triangles and reference to them singularely?</p>

<hr>

<h1>EDIT</h1>

<p>After @markE answer I updated my code <a href="https://stackoverflow.com/a/38785207/1498118">here below</a>.</p>