Add fancy mr. Devito

followCursor.js

+var canvas = document.createElement('canvas');
+var ctx = canvas.getContext('2d');
+canvas.width = 512;
+canvas.height = 512;
+canvas.style.border = "1px solid black";
+document.body.appendChild(canvas);
+var renderSaveCount = 0; // Counts the number of mouse events that we did not have to render the whole scene
+
+var arrow = {
+    x : 256,
+    y : 156,
+    image : new Image()
+};
+var mouse = {
+    x : null,
+    y : null,
+    changed : false,
+    changeCount : 0,
+}
+
+
+arrow.image.src = 'https://pbs.twimg.com/profile_images/750835789743984641/BWuiIOOa_400x400.jpg';
+function drawImageLookat(img, x, y, lookx, looky){
+     ctx.setTransform(1, 0, 0, 1, x, y);
+     ctx.rotate(Math.atan2(looky - y, lookx - x) - Math.PI / 2); // Adjust image 90 degree anti clockwise (PI/2) because the image  is pointing in the wrong direction.
+     ctx.drawImage(img, -img.width / 2, -img.height / 2);
+     ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default not needed if you use setTransform for other rendering operations
+}
+function drawCrossHair(x,y,color){
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x - 10, y);
+    ctx.lineTo(x + 10, y);
+    ctx.moveTo(x, y - 10);
+    ctx.lineTo(x, y + 10);
+    ctx.stroke();
+}
+
+function mouseEvent(e) {  // get the mouse coordinates relative to the canvas top left
+    var bounds = canvas.getBoundingClientRect(); 
+    mouse.x = e.pageX - bounds.left;
+    mouse.y = e.pageY - bounds.top;
+    mouse.cx = e.clientX - bounds.left; // to compare the difference between client and page coordinates
+    mouse.cy = e.clienY - bounds.top;
+    mouse.changed = true;
+    mouse.changeCount += 1;
+}
+document.addEventListener("mousemove",mouseEvent);
+var renderTimeTotal = 0;
+var renderCount = 0;
+ctx.font = "18px arial";
+ctx.lineWidth = 1;
+// only render when the DOM is ready to display the mouse position
+function update(){
+    if(arrow.image.complete && mouse.changed){ // only render when image ready and mouse moved
+        var now = performance.now();
+        mouse.changed = false; // flag that the mouse coords have been rendered
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // get mouse canvas coordinate correcting for page scroll
+        var x = mouse.x - scrollX;
+        var y = mouse.y - scrollY;
+        drawImageLookat(arrow.image, arrow.x, arrow.y, x ,y);
+        // Draw mouse at its canvas position
+        drawCrossHair(x,y,"black");
+        // draw mouse event client coordinates on canvas
+        drawCrossHair(mouse.cx,mouse.cy,"rgba(255,100,100,0.2)");
+       
+        // draw line from arrow center to mouse to check alignment is perfect
+        ctx.strokeStyle = "black";
+        ctx.beginPath();
+        ctx.globalAlpha = 0.2;
+        ctx.moveTo(arrow.x, arrow.y);
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+
+        // Display how many renders that were not drawn and approx how much time saved (excludes DOM time to present canvas to display)
+        renderSaveCount += mouse.changeCount -1;
+        mouse.changeCount = 0;
+        var timeSaved = ((renderTimeTotal / renderCount) * renderSaveCount);
+        var timeRatio = ((timeSaved / renderTimeTotal) * 100).toFixed(0);
+
+        // get approx render time per frame
+        renderTimeTotal += performance.now()-now;
+        renderCount += 1;
+
+    }
+    requestAnimationFrame(update);
+
+}
+requestAnimationFrame(update);
+              
\ No newline at end of file

index.html

@@ -42,6 +42,9 @@
     <button class="ceturtaisUzdevums">Click to scroll to top</button>
 
     <hr>
+
+    <h2>Bonus</h2>
+    <script src="followCursor.js"></script>
 </main>
 <script src="script.js"></script>
 </html>
\ No newline at end of file