Why animation with canvas / scss is not working? – Blancer.com Tutorials and projects

Id like to create a rain of pretzels, I have took the code from codepen.io and when I execute it over there it works. link but when I execute in local is not working. Could someone help me ?

HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page TEST</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src='../main.js'></script>
</head>
<body>
    
    
    <canvas id="canvas"></canvas>    
    
<script src='../main.js'></script>

    
</body>
</html>

CSS


body {
  margin: 0;
  overflow: hidden;
  background: #061928;
}/*# sourceMappingURL=style.css.map */

$(document).ready(function() {
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    if(canvas.getContext) {
      var ctx = canvas.getContext('2d');
      var w = canvas.width;
      var h = canvas.height;
      var img = new Image();
      img.src = "https://images.vexels.com/media/users/3/138154/isolated/preview/5d645814754f5509238ef242137b0fa3-oktoberfest-pretzel-cookie-illustration-by-vexels.png"; 
      
      var init = [];
      var maxParts = 1000;
      for(var a = 0; a < maxParts; a++) {
        init.push({
          x: Math.random() * w,
          y: Math.random() * h,
          l: Math.random() * 30,
          xs: -4 + Math.random() * 4 + 2,
          ys: Math.random() * 10 + 10
        })
      }
      
      var particles = [];
      for(var b = 0; b < maxParts; b++) {
        particles[b] = init[b];
      }
      
      function draw() {
        ctx.clearRect(0, 0, w, h);
        for(var c = 0; c < particles.length; c++) {
          var p = particles[c];
          ctx.drawImage(img, p.x, p.y, p.l, p.l); // draw image at particle's position
        }
        move();
      }
      
      function move() {
        for(var b = 0; b < particles.length; b++) {
          var p = particles[b];
          p.x += p.xs;
          p.y += p.ys;
          if(p.x > w || p.y > h) {
            p.x = Math.random() * w;
            p.y = -20;
          }
        }
      }
      
      setInterval(draw, 30);
      
    }
  });

SCSS

/*# sourceMappingURL=style.css.map */
body {
    margin: 0;
    overflow: hidden;
    background: #061928;
  }

style.css.map

{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":";AACA;EACI,SAAA;EACA,gBAAA;EACA,mBAAA;ACCJ","file":"style.css"}

I install several times SASS, I empty my caches, and adapt my code several times but it does not work.