Ideias para adicionar novos recursos ao código (se possível) e feedback

Com certeza está com a estrutura bagunçada mas adoraria saber se é possível aplicar conceitos como o "Ctrl + Z" ou 2 canvas (pra pintar sem interferência nas cores da animação), aplicar layers e etc. É possível adicionar mais sem fugir muito do Javascript bruto ?

<meta charset="UTF-8">
<canvas width="1500" height="700"> </canvas>
<br>
<b>Pressione Shift para acessar a borracha.</b> Para voltar basta selecionar a cor novamente. <b>|||</b> <input type="color" name="inputcor" id="ipc"> <button> Troque a cor ! </button>
<br>
<button type="button" name="Trocar o tamanho do pincel/borracha" id="botão2">Trocar o tamanho do pincel </button>

<script>

var nome = prompt("Olá ! qual seu nome ?");
var perguntatamanho = prompt("Bem-vindo " + nome + ", Qual será o tamanho do seu pincel ? (Recomendado de 5 a 50)");
var input = document.querySelector("ipc");
var button = document.querySelector("button");
var input2 = document.querySelector("input");
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var pincel2 = tela.getContext("2d");
var shift = 16;
var button2 = document.querySelector("[id=botão2]")

    function contorno1() {
    pincel.strokeStyle = "purple";
    pincel.strokeRect(0,0,1000,700);
    pincel.strokeStyle = "purple";
    pincel.strokeRect(0,0,1000,700) }

contorno1();

    function decidecor() {
    pincel.fillStyle = ipc.value} 

    function circulo(evt) {
    var x = evt.pageX;
    var y = evt.pageY;
    var c = perguntatamanho;

        function novo() {
        var p = prompt("Qual o valor do seu novo pincel ?");
        perguntatamanho = p; }

            if(desenha) {
            button.onclick = decidecor;
            button2.onclick = novo;
            pincel.beginPath();
            pincel.arc(x,y,c, 0, 2 * Math.PI);
            pincel.fill(); } } 
    tela.onmousemove = circulo;

    function h() {
    desenha = true; }

    function d() {
    desenha = false; }

    function apaga(evt3) {
    if(evt3.keyCode == shift) {
    pincel.fillStyle = "white"; } }

document.onkeydown = apaga;

tela.onmousedown = h;
tela.onmouseup = d ;

var o = -100;

    function fazbola(t,o) {
    pincel.beginPath();
    pincel.arc(t, o, 20, 0, 2 * Math.PI);
    pincel.fill(); }

fazbola(1050,o);
fazbola(1075,o);
fazbola(1100,o);
fazbola(1125,o);

function anima4() {
fazbola(1125,o);
o++;
if(o > 750) {
o = -100 } }

function anima3() {
fazbola(1100,o);
o++;
if(o > 750) {
o = -100 } }

function anima2() {
fazbola(1075,o);
o++;
if(o > 750) {
o = -100 } }

function anima() {
fazbola(1050,o);
o++; 
if(o > 750) {
o = -100 } } 

setInterval(anima,5);
setInterval(anima2,500);
setInterval(anima3,500);
setInterval(anima4,20);

</script>