cylon.js

(function() {
    var img = document.querySelector("img[src='https://www.wintellect.com/wp-content/uploads/2017/09/clip_image002_thumb.jpg']");
    var imgRect = img.getBoundingClientRect();
    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var cw = function(w) { return imgRect.width * (w/100); }
    var ch = function(h) { return imgRect.height * (h/100); }
    var cnv = document.createElement("canvas");
    cnv.style.position = "absolute";
    cnv.style.top = imgRect.top + scrollTop + "px";
    cnv.style.left = imgRect.left + scrollLeft + "px";
    cnv.style.zIndex = 9999;
    cnv.width = imgRect.width;
    cnv.height = imgRect.height;
    document.body.appendChild(cnv);
    window.requestAnimationFrame(drawCylon);
    var startX = 40.2, endX = 66.5;
    var startY = 23, endY = 22;
    function drawCylon(tm) {
        var ctx = cnv.getContext("2d");
        ctx.drawImage(img, 0, 0, imgRect.width, imgRect.height);
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.beginPath();
        var offs = (Math.sin(tm/500) + 1) / 2;
        var x = startX + ((endX - startX) * offs);
        var y = startY + ((endY - startY) * offs);
        ctx.arc(cw(x), ch(y), cw(0.8), 0, Math.PI * 2, true);
        ctx.fill();
        window.requestAnimationFrame(drawCylon);
    };
}());