When I change from document.getElementById to document.querySelectorAll the script breaks

Question

I have this HTML canvas snow script that I'm trying to get working on my site. I'm trying to get the script to work on every canvas element with the class canvas-snow. So when I changed document.getElementById to document.querySelectorAll the script breaks.

My HTML:

<a class="featured-image-link"></a>
<canvas id="canvas-1" class="canvas-snow">
</canvas>
<a class="featured-image-link"></a>
<canvas id="canvas-2" class="canvas-snow">
</canvas>
<a class="featured-image-link"></a>
<canvas id="canvas-3" class="canvas-snow">
</canvas>

My CSS:

.featured-image-link {
  display: block;
  height: 200px;
  width: 200px;
  background: #666;
}

 body {
  background: #000;
}

My Script:

$( document ).ready(function() {

var canvas = document.querySelectorAll("canvas-snow");
var ctx = canvas.getContext("2d");
var particlesOnScreen = 245;
var particlesArray = [];
var el = document.querySelector(".featured-image-link");
var w,h;
w = canvas.width = el.clientWidth;
h = canvas.height = el.clientHeight;

function random(min, max) {
    return min + Math.random() * (max - min + 1);
};

function clientResize(ev){
    w = canvas.width = el.clientWidth;
    h = canvas.height = el.clientHeight;
};
window.addEventListener("resize", clientResize);

function createSnowFlakes() {
    for(var i = 0; i < particlesOnScreen; i++){
        particlesArray.push({
            x: Math.random() * w,  
            y: Math.random() * h,  
            opacity: Math.random(),  
            speedX: random(-11, 11),  
            speedY: random(7, 15),    
            radius:random(0.5, 4.2),
        })
    }
};

function drawSnowFlakes(){
    for(var i = 0; i < particlesArray.length; i++){    
        var gradient = ctx.createRadialGradient(  
            particlesArray[i].x,   
            particlesArray[i].y,   
            0,                     
            particlesArray[i].x,   
            particlesArray[i].y,   
            particlesArray[i].radius  
            );

            gradient.addColorStop(0, "rgba(255, 255, 255," + particlesArray[i].opacity + ")");  // white
            gradient.addColorStop(.8, "rgba(210, 236, 242," + particlesArray[i].opacity + ")");  // bluish
            gradient.addColorStop(1, "rgba(237, 247, 249," + particlesArray[i].opacity + ")");   // lighter bluish

            ctx.beginPath(); 
            ctx.arc(
            particlesArray[i].x,  
            particlesArray[i].y,  
            particlesArray[i].radius,  
            0,                         
            Math.PI*2,                 
            false                     
            );

        ctx.fillStyle = gradient;   
        ctx.fill();                 
    }
};

function moveSnowFlakes(){
    for (var i = 0; i < particlesArray.length; i++) {
        particlesArray[i].x += particlesArray[i].speedX;     
        particlesArray[i].y += particlesArray[i].speedY;     

        if (particlesArray[i].y > h) {                                                                               
            particlesArray[i].x = Math.random() * w * 1.5;
            particlesArray[i].y = -50;
        }
    }
};

function updateSnowFall  () {
    ctx.clearRect(0, 0, w, h);
    drawSnowFlakes();
    moveSnowFlakes();
};

setInterval(updateSnowFall,50);
createSnowFlakes();

});

How do I get this to work?