CODEWITHSUNDEEP
javascriptjquerysvgcanvasdrawimage
TTA1EE
TTA1EE

Reputation: 37

It's possible to ctx.drawImage svg on Mousemove with jQuery?

I'm trying to have a svg that follows the mouse, I'm trying to use .drawImage to get what I want, but I don't understand why the 'var img = new Image ();' is an incorrect variable, where is the error? If instead of the new image variable, I use ctx.createRadialGradient, I get what I want, but with the image no, I'm new on javascript so tips and criticisms are appreciated! :)

$(document).ready(function(e) {
  $(document).mousemove(function(e) {
    var canvas = document.querySelector('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var canvasW = window.innerWidth;
    var canvasH = window.innerHeight;
     ctx = canvas.getContext('2d');
    var img = new Image();
        img.src = "https://svgshare.com/i/LDY.sfsvg";
      	
        ctx.drawImage(img, 0, 0, canvasW,canvasH);

  });
  });
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>

Upvotes: 0

Views: 93

Answers (1)

Terminat
Terminat

Reputation: 1237

A problem is that you are missing a semicolon after the declaration of ctx

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

Another one is that you never define these variables canvasW, canvasH

Upvotes: 1

Related Questions