HTML canvas scroll and zoom

Alright this is a loaded question with a lot of possible answers covering a lot of information, I'm asking for guidance not necessarily an exact answer hard coded for me to copy and paste. If you have experience in this you could refer me to key words or other guides that you have found helpful - as I am having a hard time finding answers to what I am wondering about specifically. So I am making a game with a grid that I drew on a canvas with forloops and rectStrokes. I want to be able to zoom in on this canvas and scroll in all directions without losing the ability to select cells from the grid. (current logic uses pixel coordinates within canvas) and have the grid remember previous cells selected that could potentially be off screen now due to scroll. Here is my code currently it uses nodejs html and js (as it stands currently its like a very simple collaborative pixel art editor)

//START {EXPRESS}
var express = require('express');
var app = express();
var serv = require('http').Server(app);
 
app.get('/',function(req, res) {
    res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
 
serv.listen(2000);
console.log("Server started.");



SOCKET_LIST = {};

//LATEST CLICK COORDINATES SENT FROM CLIENTS
var cX;
var cY;
var counter = 0;
//HISTORY OF ALL CLICK COORDINATES SENT FROM CLIENTS
var rX = [];
var rY = [];
//COLOR SELECTED
var selColor = "red";
var pastColor = [];

var io = require('socket.io')(serv,{});
io.sockets.on('connection', function(socket){
        
        SOCKET_LIST[socket.id] = socket;
        //RETRIEVING THE MOUSE X AND Y COORDINATES
        socket.on('mouseClick', function(data){
                rX[counter] = cX;
                rY[counter] = cY;
                cX = data.x;
                cY = data.y;
                selColor = data.c;
                pastColor[counter] = selColor;
                
                console.log(cX + ", " + cY);
                counter++;
                
                rPaint(socket);
                
        });
        
        rPaint(socket);
        rHistory(socket);
        
});

var rHistory = function(socket){
        socket.emit('history', {x:rX,y:rY,c:counter,col:pastColor})
};

var rPaint = function(socket){
        for(var i in SOCKET_LIST){
                SOCKET_LIST[i].emit('paint', {x:cX,y:cY,col:selColor})
                //SOCKET_LIST[i].emit('history', {x:rX,y:rY,c:counter})
        }
};

setInterval(function(){
        
        
},1000/25);

<div id="gameDiv">
        
        <center>
                <canvas id="ctx" width="750" height="750" style="border:1px solid #000000;"></canvas>
        </center>
        
        <select id = "selColor">
                <option value="red">Red</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="yellow">Yellow</option>
        </select> 
        
</div>
        
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
        
<script>
        //NETWORK VARIABLES
        var socket = io();
        //GETTING HTML ITEMS BY ID
        var canvas = document.getElementById("ctx");
        context = canvas.getContext("2d");
        var selColor = document.getElementById("selColor");
        
        //GRID VARIABLES
        var w=30,
        h=30,
        row=25,
        col=25,
        x=0,
        y=0,
        cX=0,
        cY=0;
        
        
        
        socket.on('history', function(data){
                for(var i = 0; i<data.c; i++){
                        context.fillStyle = data.col[i-1];
                        context.fillRect(Math.floor((data.x[i]-1)*h),Math.floor((data.y[i]-1)*w),w,h)
                }
                drawGrid();
                        
        });
        
        
        socket.on('paint', function(data){
                context.fillStyle = data.col;
                context.fillRect(Math.floor((data.x-1)*h),Math.floor((data.y-1)*w),w,h);
                drawGrid();
        });
        
        
        setInterval(function(){

    },40);
        
        //LOOP TO DRAW THE GRID
        function drawGrid(){
                for(x=0; x<row; x++){
                        for(y=0; y<col; y++){
                                context.strokeRect(w*x,h*y,w,h);
                        }
                }
                
        }
        
        //GETTING THE MOUSE X AND Y
        function getMousePos(canvas, event){
                var rect = canvas.getBoundingClientRect();
                return {
                        x:event.clientX - rect.left,
                        y:event.clientY - rect.top
                };
        }
        
        canvas.addEventListener('mousemove', function(event){
                
                var pos = getMousePos(canvas, event);
                var posx = pos.x;
                var posy = pos.y;
                
                cX = Math.ceil(posx/h);
                cY = Math.ceil(posy/w);
                
        socket.emit('mouseMove',{x:cX, y:cY});
        }, false);
        
        canvas.addEventListener('mousedown', function(event){
                
                var pos = getMousePos(canvas, event);
                var posx = pos.x;
                var posy = pos.y;

                cX = Math.ceil(posx/h);
                cY = Math.ceil(posy/w);
                
                socket.emit('mouseClick',{x:cX, y:cY, c:selColor.value});
                
        }, false );
        


        
</script>

</html>

via Jaekx