Mousemove上的jQuery ctx.drawImage问题

Question

[我正在尝试在鼠标之后添加一个svg，我正在尝试使用.drawImage来获取所需的内容，但我不明白为什么'var img = new Image（）;'是错误的变量，错误在哪里？如果代替新的图像变量，我使用ctx.createRadialGradient，如您在我自己的答案下看到的那样，我得到了想要的东西，但是没有图像，我是javascript新手！

  $(document).ready(function(e) {
  $(document).mousemove(function(e) {
    var canvas = document.querySelector('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var can = document.getElementById('canvas');
     ctx = canvas.getContext('2d'),
    var img = new Image();
        img.src = "https://svgshare.com/i/LDY.sfsvg";


      img.onload = function() {
      	var imgW = img.naturalWidth || canvasW, imgH = img.naturalHeight || canvasH;

      	var ratio = canvasW/imgW;

      	console.log(imgW, imgH, canvasW, canvasH);

      	ctx.drawImage(img, 0, 0, imgW * ratio, imgH*ratio);
      }
  });
  });

body, html {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<canvas >
  
</canvas>

Answer 1

带有梯度的固定版本

$(document).ready(function(e) {
  $(document).mousemove(function(e) {
    var canvas = document.querySelector('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var ctx = canvas.getContext('2d'),
      gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width);
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, 'transparent');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  });
});

body, html {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<canvas >
  
</canvas>