Canvas element + Javascript working in Chrome and Firefox, not in Internet Explorer

Question

I am using a modified version of the Leaflet FullCanvas Plugin to draw lines on a map. These lines work perfectly find on Firefox and Chrome, but on Internet Explorer (version 11, I'm using Windows 8.1) these lines never get reset when moving/zooming the map. I made a Fiddle to illustrate the problem:

http://jsfiddle.net/tee99z65/

Try dragging and zooming while on Chrome or Firefox, and then Internet Explorer (11). What is going on in this code? The method that gets called every time the lines need to be redrawn is drawCanvas() :

drawCanvas: function () {
        var canvas = this.getCanvas();
        var ctx = canvas.getContext('2d');
        var me = this;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var bounds = this._myMap.getBounds();
        if (!this.options.filterPointsInBounds) bounds = new L.LatLngBounds([-90, -180], [90, 180]);
        var points = this._myQuad.retrieveInBounds(this.boundsToQuery(bounds));
        points.forEach(function (point) {
            var d = point.data;
            if (d.draw && !d.draw(d)) return;    // allows dynamic filtering of curves
            var spoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.slat, d.slon));
            if (d.tlat && d.tlon) {
                var tpoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.tlat, d.tlon));
                me.drawCurve(point, spoint, tpoint, d.style ? d.style(d) : null);
            }
        });
    },

Does anyone have any idea what's going on here? A fix would be nice, but I'm already happy if anyone can point out why this is happening so I can attempt a fix myself.

Answer 1

Why?

Because mousewheel events are not yet standardized. (Note to browser makers: Seriously!??? , why have you not standardized the mousewheel event yet. Scrolling mice have been around for years! -- end of rant/ ).

Fix:

You will have to listen for the mousewheel event on IE instead of the DOMMouseScroll event that most other browsers listen for. I don't work with leavlet, but that appears to be where you need to add the fix.

Answer 2

Problem solved:

http://jsfiddle.net/tee99z65/3/

The function that draws the curve, drawCurve(), has been edited from:

ctx.moveTo(startPoint.x, startPoint.y);
ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
ctx.stroke();

To:

 ctx.beginPath();
 ctx.moveTo(startPoint.x, startPoint.y);
 ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
 ctx.stroke();
 ctx.closePath();

Lesson learned: never forget about beginPath() and closePath().