mousewheel(和其他类型）的addEventListener不起作用

需要为画布元素实现放大/缩小（和平移）功能。这是我第一次尝试JavaScript事件，所以我不存在的经验可能是这里的问题。我不知道我使用的类型是否正确。使用了我在网上找到的。

function onLoad() {
var canvas;
var context;
var exampleFamilyTrees;
var topPerson;
var previousMousePosition;
var mousePosition
var pan;
var mouseDown;
var zoom;   
function initialise() {
    canvas = document.getElementById('canvas');
    if (!canvas) {
        alert('Error: Canvas element not found');
        return;
    }
    context = canvas.getContext('2d');
    if (!context) {
        alert('Error: Unable to get canvas context');
        return;
    }
    exampleFamilyTrees = new ExampleFamilyTrees();
    topPerson = exampleFamilyTrees.getFamilyTree(0);
    pan = new Vector(0, 0);
    zoom = 1;
    //context.translate(canvas.width*0.5, canvas.height*0.5);
}
function draw() {   
    context.save();
    context.translate(pan.getX(), pan.getY());
    context.scale(zoom, zoom);
    topPerson.draw(context);
    context.restore();
}
initialise();   
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousewheel', onMouseWheel, false); 
function onMouseDown(event) {
    previousMousePosition = new Vector(event.clientX, event.clientY);
    mouseDown = true;
}
function onMouseUp(event) {
    mouseDown = false;
}   
function onMouseMove(event) {
    mousePosition = new Vector(event.clientX, event.clientY);
    if (mouseDown) {
        var difference = mousePosition.subtract(previousMousePosition);
        pan.add(difference);
    }
    previousMousePosition = mousePosition;
}
function onMouseWheel(event) {
    var wheelDelta = event.wheelDelta;
    if (wheelDelta > 0){
        zoom = zoom * 1.1;
    }
    else {
        zoom = zoom * 0.9;
    }
}
setInterval(draw, 1000/60);}

这些功能都不起作用。我想我的语法是错误的。控制台一点也不抱怨。