HTML Canvas Panning via Mouse

Question

Codepen: https://codepen.io/anon/pen/EvNqyY

Using Canvas, I'm creating thousands of circles on a canvas and the canvas fills the entire viewport. I've added in some panning functions but I'm having an issue with the redrawing after the mouse is released.

Basically the user can drag the canvas around (code-wise, this works) but visually it doesn't show any panning and on mouse release, the canvas gets redrawn in its original position so it seems as though nothing ever happened.

JS:

$(document).ready(function() {
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");
    var global = {
        scale: 1,
        offset: {
            x: 0,
            y: 0,
        },
    };
    var panning = {
        start: {
            x: null,
            y: null,
        },
        offset: {
            x: 0,
            y: 0,
        },
    };
    var systems = '../js/json/eveSystems.json';

    fitToContainer(canvas);

    $.getJSON(systems, function(data) {

        function draw() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            data.forEach(function(systemData) {
                var coordX = systemData.position.x / 100000000000000;
                var coordY = systemData.position.y / 100000000000000;

                ctx.beginPath();
                ctx.arc(coordX,coordY,20,0,2*Math.PI);
                ctx.stroke();
            });
        }

        draw();

        canvas.addEventListener("mousedown", startPan);

        function pan() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(panning.offset.x, panning.offset.y);
            console.log(panning.offset.x);
            draw();
        }

        function startPan(e) {
            window.addEventListener("mousemove", trackMouse);
            window.addEventListener("mousemove", pan);
            window.addEventListener("mouseup", endPan);
            panning.start.x = e.clientX;
            panning.start.y = e.clientY;
        }

        function endPan(e) {
            window.removeEventListener("mousemove", trackMouse);
            window.removeEventListener("mousemove", pan);
            window.removeEventListener("mouseup", endPan);
            panning.start.x = null;
            panning.start.y = null;
            global.offset.x = panning.offset.x;
            global.offset.y = panning.offset.y;
        }

        function trackMouse(e) {
            var offsetX  = e.clientX - panning.start.x;
            var offsetY  = e.clientY - panning.start.y;
            panning.offset.x = global.offset.x + offsetX;
            panning.offset.y = global.offset.y + offsetY;
        }
    });

    function fitToContainer(canvas){
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }

});

Answer 1

ctx.setTransform overwrites the remapping of the (0,0) point done by ctx.translate(). So you should remove the line ctx.setTransform(1, 0, 0, 1, 0, 0); from your draw() function.