Found a really nice solution that I thought I should share in case anybody else has the same question.

I used pointer-events: none on the canvas. I set canvas.onclick and canvas.onmousemove like I normally would; however, pointer events are disabled so nothing happens. I bypassed the disabled pointer events like this:

document.addEventListener('click', function() {

 canvas.onclick();

});

window.onmousemove = function() {

 canvas.onmousemove();

}

// etc.

So far, mouse events will be received by both the web page AND the canvas.

Now, in my interactive program, I included a simple little function called mouseOver which returns true if the mouse is hovering over the interactive object. I modified window.onmousemove like this:

window.onmousemove = function() {

 canvas.onmousemove(); 

 if (mouseOver()) {

  canvas.style[pointer-events] = auto;

 } else {

  canvas.style[pointer-events] = none;

}};

This prevents mouse events from going through to the web page, allowing interaction with the object without webpage interference.