title: Draw a triangle to pixel array
body: <p>I have to add a triangle to a pixel array. Here's what I have :</p>
  
  <ul>
  <li>An array representing pixels in this form : [r, g, b, a, r, g, b, a, ...]</li>
  <li>pixel density</li>
  <li>Image width &amp; height</li>
  <li>My triangle : {p0: {x: 5, y: 20},  p1: {x: 65, y: 220}, p2: {x: 10, y: 143}}</li>
  <li>Triangle color {r: 100, g: 214, b: 45, a:200}</li>
  </ul>
  
  <p>I am able to fill my image with this code: </p>
  
  <pre><code>for (let i = 0; i &lt; pixels.length; i+=4) {
    pixels[i] = color.r;
    pixels[i+1] = color.g;
    pixels[i+2] = color.b;
    pixels[i+3] = color.a;
  }
  </code></pre>
  
  <p>How can I compute which pixels need to be filled with the color ?</p>
  
  <p>Thanks !</p>
  
  <p>EDIT: maybe I should have developped a little bit. I managed to draw the points of the triangle, but I don't know how to fill the area. I would also like to take performance in consideration, and avoid looking at each pixels. Here's how I managed to draw the points: </p>
  
  <pre><code>static getIndex(x, y, width) {
    return 4 * (width * y + x);
  }
  
  static drawTriangle(triangle, img) {
    for (let i = 0; i &lt; triangle.points.length; i++) {
      let point = triangle.points[i];
      for (let a = -5; a &lt; 6; a++) {
        let idx = this.getIndex(point.x + a, point.y, img.width);
        img.pixels[idx] = triangle.color.r;
        img.pixels[idx + 1] = triangle.color.g;
        img.pixels[idx + 2] = triangle.color.b;
        img.pixels[idx + 3] = triangle.color.a;
  
        idx = this.getIndex(point.x, point.y + a, img.width);
        img.pixels[idx] = triangle.color.r;
        img.pixels[idx + 1] = triangle.color.g;
        img.pixels[idx + 2] = triangle.color.b;
        img.pixels[idx + 3] = triangle.color.a;
      }
    };
  }
  </code></pre>