How to change the value of shadowBlur, shadowoffsetX, and shadow offsetY in a range slider?

I would like to use a range slider to change the value of shadowOffsetX, shadowOffsetY, and blurring of a rectangle. But I can't manage to have the range slider work. Can anyone correct me where I've gone wrong? Here is the code: (I'm new to coding so please excuse my messy attempt :P ) `

<!DOCTYPE html>
<html>
<canvas id="shadow" width="650" height="300" 
style="border:1px solid black;">
</canvas>
<script>
  //shadow effect with positive offsets
  function myDraw (val) {
    var canvas = document.getElementById("shadow");
    var context = canvas.getContext("2d");
    var mySliderX = document.getElementById("mySliderX").value;
        var mySliderY = document.getElementById("mySliderY").value;
    var mySlider = document.getElementById("mySlider").value;

context.shadowBlur= 10;
    context.shadowOffsetX = -20;
    context.shadowOffsetY = -20;
    context.shadowColor = "lightgreen";
    context.fillStyle = "lightpink";
    context.fillRect (300, 25, 200, 200);
    mySliderX.style.boxShadow = val;
    mySliderY.style.boxShadow = val;
    mySlider.style.blur = val;
  }

</script>

<input type="range" min = "-30" max="30" value="15" id="mySliderX" oninput= "myDraw (this.value/100)">
<input type="range" min = "-30" max="30" value="15" id="mySliderY" oninput= "myDraw (this.value/100)">
<input type="range" min = "1" max="100" value="50" id="mySlider"oninput= "myDraw (this.value/100)">
</body>
</html>

Solution

I imagine you want something like this?

  <canvas id="shadow" width="650" height="300" 
style="border:1px solid black;">
</canvas>
<script>
  //shadow effect with positive offsets
  function myDraw () {
  let canvas = document.getElementById("shadow");
  let context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
  let [mySliderX,mySliderY,mySlider] = [document.getElementById("mySliderX"),document.getElementById("mySliderY"),document.getElementById("mySlider")];
  
const data = {x:mySliderX.value,y:mySliderY.value,blur:mySlider.value};
context.fillStyle = "lightpink";
context.filter = `drop-shadow(${data.x}px ${data.y}px ${data.blur}px lightgreen)`;
context.fillRect (300, 25, 200, 200)
  }
</script>

<input type="range" min = "-30" max="30" value="15" id="mySliderX" oninput= "myDraw()">
<input type="range" min = "-30" max="30" value="15" id="mySliderY" oninput= "myDraw ()">
<input type="range" min = "1" max="100" value="0" id="mySlider"oninput= "myDraw ()">