Drawing a straight line using a shader with regl

line.js

const drawLine = regl({
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main() {
      gl_FragColor = color;
    }`,

  vert: `
    precision mediump float;
    attribute vec2 position;
    uniform vec2 size;

    void main() {
      // This constrains it to a square rather than the whole screen, remove if not desired
      vec2 aspect = vec2(1, size.x / size.y);
      gl_Position = vec4(position * aspect, 0, 1);
    }`,

  attributes: {
    position: regl.prop('line'),
  },

  uniforms: {
    color: regl.prop('color'),
    size: function (context: any) {
      return [context.viewportWidth, context.viewportHeight]
    },
  },

  elements: [
    [0, 1],
  ],

  lineWidth: 5
});

drawLine({
  // line is a 2D array: [[startX, startY], [endX, endY]]
  line: [[0, 0], [0.5, 0.5]],
  // color is an array: [r, g, b, a]
  color: [1, 1, 1, 1],
});