Roaming circle

by arcm111

HTML

<div id='div'></div>
<canvas id="canvas"/>

CSS

body{
    background: CadetBlue;
}

#div{
    width: 50px;
    height: 50px;
    background: MediumAquaMarine;
    position: absolute;
    border-radius: 50px;
    border: 3px solid DarkSlateGray;
    box-shadow: 1px 3px 6px 2px rgba(0, 0, 0, 0.3);
}

JavaScript

$(document).ready (function()
{
    var width = $(window).innerWidth() - 20;
    var height = $(window).innerHeight() - 20;
    var center = {'x': width / 2, 'y': height / 2};
    var opt = {'easing': 'linear', 'duration': 100};
	var canvas = document.getElementById ('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext ('2d');
    var pos = center;
    
    function circle (x, y)
    {
        ctx.beginPath();
        ctx.arc (x, y, 10, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'black';
        ctx.fill();
    }
    
    function line (x, y, color)
    {
        ctx.beginPath();
        ctx.moveTo (pos.x, pos.y);
        ctx.lineTo (x, y);
        ctx.lineWidth = 3;
        ctx.strokeStyle = color;
        ctx.stroke();
        pos = {'x': x,'y': y};
    }

    function anim (elm, isCallback = false)
    {
        if (isCallback) return function()
        {
            anim (elm);
        }
        if (elm.position().left + 100 > width) elm.css ({left: 0});
        if (!opt.hasOwnProperty ('complete'))
        {
            opt.complete = anim (elm, true);
        }
        elm.animate ({left: '+=10'}, opt);
    }
    
    function rand (int)
    {
        return Math.floor (Math.random() * int);
    }
    
    function color()
    {
        var val = rand (255);
        //return "rgb("+ rand(255) +","+ rand(255) +","+ rand(255) +")";
        return "rgb(" + val + "," + val + "," + val + ")";
    }

    function roam (elm, callback = false)
    {
        if (callback) return function()
        {
            roam (elm);
        }
        //var angle = rand (360) * Math.PI / 180;
        //var x = Math.floor (Math.sin (angle) * (center.x - 50));
        //var y = Math.floor (Math.cos (angle) * (center.y - 50));
        //var prop = {top: y + center.y, left: x + center.x};
        var o = pos;
        var x = rand (width - 50);
        var y = rand (height - 50);
        var angle = Math.atan2 (x - o.x + 25, y - o.y...