Javascript - mouse follow + Lighting?

Question

I'm practicing my Javascript, so i made a follow-mouse function. I got it working, but now i have a new idea, which i'm not sure is possible.

Is there a way, to make a '' orb of vision '' follow the mouse, so that everything in that area gets visible? . Kind of like using a torch, to see a small area where your mouse is.

NOTE : I'm not asking for someone to code it for me, but rather a explanation, since i'm curious to learn it myself, but i do need a guide-line!**

 function mouseMovement(e) { var x = document.getElementById('x_show'); var y = document.getElementById('y_show'); x.innerHTML = e.clientX; y.innerHTML = e.clientY; document.getElementById("followDiv").style.left = event.clientX - 15 + "px"; document.getElementById("followDiv").style.top = event.clientY - 15 + "px"; } document.onmousemove = mouseMovement;

 #followDiv { background-color: lightblue; height: 30px; width: 30px; position: absolute; }

 <p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div>

Answer 1

A non-canvas way would be :

Set page background to black
Round the borders of #followDiv using 'border-radius: 50%;'
Set the background of this div to image
Play with the background-position to move opposite to mouse

Edit:

A final touch by softening the edges using box-shadow

 function mouseMovement(e) { var x = document.getElementById('x_show'); var y = document.getElementById('y_show'); x.innerHTML = e.clientX; y.innerHTML = e.clientY; var followDiv = document.getElementById("followDiv"); followDiv.style.left = event.clientX - 60 + "px"; followDiv.style.top = event.clientY - 60 + "px"; followDiv.style.backgroundPositionX = (-event.clientX) + 'px'; followDiv.style.backgroundPositionY = (-event.clientY) + 'px'; } document.onmousemove = mouseMovement;

 body { background: black; } #followDiv { background-color: lightblue; height: 120px; width: 120px; position: absolute; border-radius: 50%; box-shadow: 0 0 12px 12px black inset, /* workaround for a soft edge issue : http://stackoverflow.com/a/37460870/5483521 */ 0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset; background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat; }

 <p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div>

Answer 2

@Bulent Vural, this was my solution. But i can't get the circle ' smaller ' since i have to re-size it to fit the screen, which won't work with %'s.

The only way this works, is adding alot of " black, black, black ". Which isn't very pleasing.

  function mouseMovement(e) { var x = document.getElementById('x_show'); var y = document.getElementById('y_show'); x.innerHTML = e.clientX; y.innerHTML = e.clientY; document.getElementById("followDiv").style.left = event.clientX-2000+"px"; document.getElementById("followDiv").style.top = event.clientY-2000+"px"; } document.onmousemove = mouseMovement; </script>

  html, body {margin: 0; height: 100%; overflow: hidden} #followDiv { /* background-color: lightblue; */ height: 4000px; width: 4000px; position: absolute; background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black); background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black); background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black); background: radial-gradient(circle, rgba(248, 255, 252, 0),black); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div> </body>

Answer 3

i think this could help you what you want.

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } $("#canvas").mousemove(function(e){handleMouseMove(e);}); var radius=30; var img=new Image(); img.onload=function(){ draw(150,150,30); } img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg' function draw(cx,cy,radius){ ctx.save(); ctx.clearRect(0,0,cw,ch); var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius); radialGradient.addColorStop(0, 'rgba(0,0,0,1)'); radialGradient.addColorStop(.65, 'rgba(0,0,0,1)'); radialGradient.addColorStop(1, 'rgba(0,0,0,0)'); ctx.beginPath(); ctx.arc(cx,cy,radius,0,Math.PI*2); ctx.fillStyle=radialGradient; ctx.fill(); ctx.globalCompositeOperation='source-atop'; ctx.drawImage(img,0,0); ctx.globalCompositeOperation='destination-over'; ctx.fillStyle='black'; ctx.fillRect(0,0,cw,ch); ctx.restore(); } function handleMouseMove(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); draw(mouseX,mouseY,30); }

 body{ background-color: ivory; } #canvas{border:1px solid red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Move mouse to reveal image with "flashlight"</h4> <canvas id="canvas" width=300 height=300></canvas>

Javascript - mouse follow + Lighting?

Question

3 answers

solution1
2 ACCPTED 2017-02-16 23:51:32

solution2
0 2017-02-17 00:00:20

solution3
-1 2017-02-16 23:57:24

Javascript - mouse follow + Lighting?

Question

3 answers

solution1 2 ACCPTED 2017-02-16 23:51:32

solution2 0 2017-02-17 00:00:20

solution3 -1 2017-02-16 23:57:24

solution1
2 ACCPTED 2017-02-16 23:51:32

solution2
0 2017-02-17 00:00:20

solution3
-1 2017-02-16 23:57:24