为什么使用ES6语法在页面加载时自动调用函数？

Question

我有这段代码，将其从较旧的语法转换为Es6语法。现在，我的问题是即使没有事件，功能也会自动调用。以下是我的控制台消息：

(index):180 Uncaught TypeError: Cannot read property '0' of undefined
    at drawOnCanvasOnDemand ((index):180)
    at draws.map.element ((index):246)
    at Array.map (<anonymous>)
    at redoMove ((index):245)
    at (index):292

这是我的代码（实际上是使用HTML5 Canvas的白板动画）

// Variables
let pencilColor = "#FFFFFF";
let isActive = false;

let plots = [];
let draws = [];
let redo = [];

// Constants
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');

// Elements
const colorPicker = document.querySelector(".colorPicker")
const colorPickerInput = document.querySelector('.jscolor')
const pencilTool = document.querySelector(".pencilColor")
const jsColorElement = document.querySelector(".jscolor")
const undoIcon = document.querySelector(".undo")
const redoIcon = document.querySelector(".redo")
const clearIcon = document.querySelector(".clear")

// Configuration
ctx.lineWidth = '3';



// Functions
const hidePopups = () => {
    let hideOnClick = document.querySelectorAll(".hideOnClick")
    Array.from(hideOnClick).map(element => {
        element.style.display = "none"
    })
}


const draw = (e) => {
    if(!isActive) return;

    // cross-browser canvas coordinates
    var x = e.offsetX || e.layerX - canvas.offsetLeft;
    var y = e.offsetY || e.layerY - canvas.offsetTop;

    plots.push({
        x: x,
        y: y,
        color: pencilColor
    });
    drawOnCanvas(pencilColor, plots);
}

// Draw
const drawOnCanvas = (color, plots) => {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(plots[0].x, plots[0].y);

    for(var i=1; i<plots.length; i++) {
      ctx.lineTo(plots[i].x, plots[i].y);
    }
    ctx.stroke();
}

// Draw
const drawOnCanvasOnDemand = (drawsLocal) => {
    ctx.lineWidth = '4';
    ctx.strokeStyle = drawsLocal[0].color;
    ctx.beginPath();
    ctx.moveTo(drawsLocal[0].x, drawsLocal[0].y);
    for(var i=1; i<drawsLocal.length; i++) {
      ctx.lineTo(drawsLocal[i].x, drawsLocal[i].y);
    }
    ctx.stroke();
}

//Start and Stop Drawing
const startDraw = (e) => {
    isActive = true;
}

const endDraw = (e) => {
    document.querySelector(".undo").classList.remove("disabled")
    isActive = false;
    draws.push(plots)
    // empty the array
    plots = [];
}

const toggleColorPopup = () => {
    if (colorPicker.style.display == 'none') {
        colorPicker.style.display = 'inline-block'
    } else {
        colorPicker.style.display = 'none'
    }
}

const changeColor = () => {
    // Local Variables
    let newPencilColor = `#${colorPickerInput.value}`
    let newToolColor = colorPickerInput.style.color;

    // Main Code
    pencilColor = newPencilColor
    pencilTool.style.background = newPencilColor
    pencilTool.style.color = newToolColor
}

const undoMove = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    redo.push(draws[draws.length-1])
    redoIcon.classList.remove("disabled")
    draws.splice((draws.length-1))
    if (draws.length <= 0) {
        undoIcon.classList.add("disabled")
    }
    draws.map(element => {
        drawOnCanvasOnDemand(element)
    })
}

const redoMove = () => {
    if (redo.length) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        draws.push(redo[redo.length-1])
        redo.splice(redo.length-1)

        if (redo.length <= 0) {
            redoIcon.classList.add("disabled")
        }
        undoIcon.classList.remove("disabled")

        draws.map(element => {
            drawOnCanvasOnDemand(element)
        })
    }
}

const clearCanvas = () => {
    draws = []
    plots = []
    redo = []
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    redoIcon.classList.add("disabled")
    undoIcon.classList.add("disabled")
} 

const triggerHotkey = (e) => {
    if (e.ctrlKey && e.shiftKey && e.which == "90") {
        redoMove()
    } else if (e.ctrlKey && e.which == "90") {
        undoMove()
    } else if(e.which == "27"){
        hidePopups()
    } else if (e.which == "8" && e.ctrlKey) {
        clearCanvas()
    }
}

// Main Code
pencilTool
    .addEventListener("click", () => {
        toggleColorPopup()
    })
    document.querySelector("#closeColorPicker")
        .addEventListener("click", () => {
            colorPicker.style.display = 'none'
        })

    // Change Canvas Color
jsColorElement
    .addEventListener("change", changeColor())


    // Undo
    undoIcon
        .addEventListener("click", undoMove())
    // Redo
    redoIcon
        .addEventListener("click", redoMove())
    // Clear Canvas
    clearIcon
        .addEventListener("click", clearCanvas())

    // Key Shortcuts
    document.addEventListener("keydown", (e) => {
        triggerHotkey(e)
    })

    // Events
    canvas.addEventListener('mousedown', startDraw, false);
    canvas.addEventListener('mousemove', draw, false);
    canvas.addEventListener('mouseup', endDraw, false);
    canvas.addEventListener("click", () => {
        hidePopups()
    })

有人可以告诉我我在做什么错吗？在我进行任何更改之前，代码就可以完美运行