Shadow rounded rectangle

<canvas id="canvas" width="2000" height="2000"></canvas>
<script>
  window.onload = function () {
    function urlToFile(url, filename, mimeType) {
      mimeType = mimeType || (url.match(/^data:([^;]+);/) || '')[1];
      return (fetch(url)
        .then(function (res) {
          return res.arrayBuffer();
        })
        .then(function (buf) {
          return new File([buf], filename, {
            type: mimeType
          });
        })
      );
    }

    CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
      if (width < 2 * radius) radius = width / 2;
      if (height < 2 * radius) radius = height / 2;
      this.beginPath();
      this.moveTo(x + radius, y);
      this.arcTo(x + width, y, x + width, y + height, radius);
      this.arcTo(x + width, y + height, x, y + height, radius);
      this.arcTo(x, y + height, x, y, radius);
      this.arcTo(x, y, x + width, y, radius);
      this.closePath();
      return this;
    }

    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");

    let margine = 10;
    let rect = {
      x: margine,
      y: margine,
      width: canvas.width - (margine * 2),
      height: canvas.height - (margine * 2)
    }

    ctx.shadowBlur = 4;
    ctx.shadowColor = "black";

    // Fill in canvas
    ctx.roundRect(rect.x, rect.y, rect.width, rect.height, 20);
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fill();

    // Convert to file
    urlToFile(canvas.toDataURL("image/svg"), 'img.svg')
      .then(function (file) {
        console.log(file);
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(file);
        elem.download = file.name;
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
      })
  }
</script>