Vertex-based Border

by flek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.min.js"></script>
<canvas id="canvas" width="240" height="180"></canvas>

JavaScript

const createBorder = (initialOptions) => {
	const vertexPositions = new Float32Array([
    // top
    -1, 1,
    -0.9, 1,
    0.9, 1,
    1, 1,
    // right
    1, 0.9,
    1,-0.9,
    // bottom
    1, -1,
    0.9, -1,
    -0.9, -1,
    -1, -1,
    // left
    -1,-0.9,
    -1, 0.9,
    // inner top
    -0.9, 0.9,
    0.9, 0.9,
    // inner bottom
    0.9, -0.9,
    -0.9, -0.9,
  ]);
  
  const indices = new Uint16Array([
    // top
    0, 3, 13,
    13, 12, 0,
    // right
    3, 6, 14,
    14, 13, 3,
    // bottom
    6, 9, 15,
    15, 14, 6,
    // left
    9, 0, 12,
    12, 15, 9
  ]);
  
  let align = 'outer';
  
  const setAlign = (newAlign) => {
    align = newAlign;
  }
  
  let color = [0, 0, 0];
  
  const setColor = (newColor) => {
    color = newColor.slice(0, 3);
  }
  
  let opacity = 1;
  
  const setOpacity = (newOpacity) => {
    opacity = newOpacity;
  }
  
  let width = 1;
  let height = 1;
  
  const setWidth = (newWidth) => {
  	width = newWidth;
  }
  
  const setHeight = (newHeight) => {
  	height = newHeight;
  }
  
  let size = 1;
  
  const setSize = (newSize) => {
  	size = newSize;
  }
  
  let pixelSize = [1, 1];
  
  const setPixelSize = (canvasSize) => {
  	pixelSize = [
    	1 / (canvasSize[0] / 2),
      1 / (canvasSize[1] / 2)
    ]
  }
  
  const updatedVertices = () => {
    const sx = size;
    const sy = size;
    
  	let xPad = 0;
    let yPad = 0;
    
    if (align === 'inner') {
      xPad = 2 * sx;
      yPad = 2 * sy;
    }
    
    const w = width - xPad;
    const h = height - yPad;
    const oH = h + 2 * sy; // outer height
        
    // top
    vertexPositions[0] = 0;
    vertexPositions[1] = oH;
    vertexPositions[2] = size;
    vertexPositions[3] = oH;
    vertexPositions[4] = size + w;
    vertexPositions[5] = oH;
    vertexPositions[6] = size + w + size;
    vertexPositions[7] = oH;
    // right
    vertexPositions[8] = size + w + size;
    vertexPositions[9] = oH - size;
    vertexPositions[10] = size + w +...