JS: X in Square coding challenge

index.js

// ++++++++++++++++
// ++            ++
// + +          + +
// +  +        +  +
// +   +      +   +
// +    +    +    +
// +     +  +     +
// +      ++      +
// +     +  +     +
// +    +    +    +
// +   +      +   +
// +  +        +  +
// + +          + +
// ++            ++
// ++++++++++++++++


const SIZE = 8
const SIZE_X = SIZE + (SIZE / 2)
const SIZE_Y = SIZE * 2
const HALF_Y = (SIZE_Y / 2) - 1
const SYMBOL = '+'
const SYMBOL2 = ' '
let canvas = ''

canvas += '\n'

for (let i = 0; i < SIZE_Y - 1 ; i++) {
  if (i === 0 || i === SIZE_Y - 2) {
    canvas += SYMBOL.repeat(SIZE_Y)
  } else {
    canvas += SYMBOL
    const sides = i > HALF_Y
      ? Math.max(HALF_Y - (i % HALF_Y) - 1, 0)
      : Math.max(i - 1, 0)
    const n = i % HALF_Y
    const left = n === HALF_Y ? sides - 1 : sides
    const right = n === HALF_Y ? sides + 1 : sides
    const middle = Math.max(SIZE_X - (sides * 2), 0)
    canvas += SYMBOL2.repeat(left)
    canvas += SYMBOL
    canvas += SYMBOL2.repeat(middle)        
    canvas += SYMBOL
    canvas += SYMBOL2.repeat(right)
    canvas += SYMBOL
  }

  canvas += '\n'
}

console.log(canvas)