grinat

let ctx = canvas.getContext('2d')
 let data = ctx.createImageData(screenWidth, screenHeight)
 for (var i = 0; i < data.length; i += 4) {
      data[i] =  // red
      data[i + 1] = // green
      data[i + 2] =  // blue
      data[i + 3] = // opacity
   }
   ctx.putImageData(data, 0, 0)

class User (){
    construct ()
   save() {
       return ajax-запрос
   }
}
class List () {
  this._list = []
  consruct(id) {
  }
  addItem(user)
  render () {
      doucment.getElemntBy(id).innerHtml = ''
      this._list.forEach(user => {
         // добавление новой строки
     })
  }
   
  fetcList () {
     return аяк-запрос.then(users => {
        this._lsit = []
         users.forEachv(user => {
             this.addItem(user)
        })
    })
   }
}
new Subsriber {
  action,
  cb
}
class Emitter {
    this._evts = []
    subsctibe(action, cb) {
       this.evts.push(new Subsriber (action, cb))
    }
    emit(action, value) {
        this.evts.forEach({action} => {
       if (act === action) {
           cb(value)
       }
     })
    }
}
class Form (){
  consruct(id, emmiter) {
    doucment.getElemntBy(id).addEventListener('sumbit', () => this.onSubmit)
  }
  addElement(elem) {
     this.elements.push(el)
   }
  onSubmit () {
      const user = new User()
      for (let elem of this.elements) {
          user[elem.name] = elem.value
     }
     user.save().then(добавленный юзер => {
           this.emmiter.emit('submit', user)
     })
  }
  }

  render () {
      doucment.getElemntBy(id).innerHtml = ''
      this.elements.forEach(elem => {
         doucment.getElemntBy(id).insertBefore(elem)
     })
  }
}
// инициализация этого говна
const list = new List(listId)
const emmiter = new Emiiter()
const form = new Form(formId, emmiter)
form.addElement(document.createElemnt('input'))

// теперь отрисовка
form.render()
list.render()

// подписываемся на события формы
emmiter.subscribt('sumbit', user => {
    list.addItem(user)
    if (не грузим с сервера) {
      // перерисуем
         list.render()
    } else {
        // перерисуем
         list.fetchList().then(() => ist.render())
     }
})