function distribute(events, canvas) {
  function setStyle(column, nr, columns) {
    const width = canvas.getContentWidth() / columns.length
    column.forEach(event => {
      const top = utils.minToY(event.start)
      const height = utils.minToY(event.end) - top
      event.setStyle({
        width: `${width}px`,
        height: `${height}px`,
        top: `${top}px`,
        left: `${nr * width}px`
      })
    })
  }

  createGroups(events).forEach(group => {
    createColumns(group).forEach(setStyle)
  })

  return events
}
Distribute events within canvas.

- No events may visually overlap.
- If two events collide in time, they MUST have the same width.
  This is an invariant. Call this width W.
- W should be the maximum value possible without breaking the previous invariant.

@param {Array} events
@param {Canvas} canvas
@return {Array} events