let input = document.createElement('input');
input.type = 'text';
input.style.position = 'fixed';

let canvas = document.querySelector('canvas');
canvas.style.height='50vh';
canvas.style.margin='0';

document.body.appendChild(input);
const redirectKeyEvent = (eventData, eventType) => {
  let key = eventData;
  let code = `Key${eventData.toUpperCase()}`;

  if (eventData === ' ') {
    key = 'Space';
    code = 'Space';
  }

  const event = new KeyboardEvent(eventType, {
    key: key,
    code: code,
    bubbles: true,
    cancelable: true,
  });

  document.dispatchEvent(event);
};

input.addEventListener('beforeinput', (e) => {
  if (e.data) {
    redirectKeyEvent(e.data, 'keydown');
    redirectKeyEvent(e.data, 'keypress');
    redirectKeyEvent(e.data, 'keyup');
  }
  e.target.value = '';
});