may2.html

<meta name=viewport content='initial-scale=1.0, minimum-scale=0.25'>
<title>console</title>
<button id=run title='Ctrl+Enter'>Run</button>
<button id=cancelBtn title=Esc>Cancel</button><br>
<textarea id=editor style='width: 100%; height: 300px; font-family: monospace;' spellcheck=false autocapitalize=none>may2()

async function may2() {
  while (true) {
    x = Math.random() * 400
    y = Math.random() * 400
    c.fillText('😘', x, y)
    await sleep(100)
    if (cancel) return
  }
}
</textarea><br>
<canvas id=canvas width=400 height=400></canvas>
<script>
const c = canvas.getContext('2d')
canvas.onclick = () => c.reset();
run.onclick = function () {
    c.reset();
    cancel = false;
    eval('(async function () {' + editor.value + '\n})()');
};
cancelBtn.onclick = () => cancel = true;
editor.onkeydown = function (event) {
    const ENTER = 13, ESC = 27;
    if (event.ctrlKey && event.keyCode == ENTER) {
        run.onclick();
    } else if (event.keyCode == ESC) {
        cancelBtn.onclick();
    }
};
async function sleep(delay = 0) {
    return new Promise(r => setTimeout(r, delay));
}
</script>