// "Being clever is not clever"

// -- Bjarne Stroustrup

d = document

b = d.body

a = (e = 'div') => b.appendChild(d.createElement(e))

t = a`input`

s = ''

a()

O = v => t.value = v

'0123456789+-*()/C='.split``.map(v => {

  v == '+' && a()

  _ = a`button`

  _.innerHTML = v

  o = { 

    C(){s = O('')},

    ['='](){O(eval(s))}

  }

  _.onclick = () => o[v] ? o[v]() : (s = s + v, O(s))

})

((

  width = 200, height = 200, 

  cnv = document.body.appendChild(

    Object.assign(

      document.createElement('canvas'), {

      width, height

    })

  ),

  c = cnv.getContext('2d'), 

  f = c.fillRect.bind(c),

  C = _ => c.fillStyle = _) => {

  C`gray`; f(0, 0, width, height);

  C`blue`; f(10, 10, 100, 20);

})();