I'm struggling with the maths on this one. I have an arrow that moves randomly around the canvas. It rotates smoothly and moves towards the next X/Y position. Great. How can I make my circle object always appear just in front of the arrow; like as if the arrow is holding the circle on it's tip. 

Here is my code:

```
player.prototype.draw = function (w, h, ctx) {
    ctx.beginPath();
    ctx.save();
    ctx.fillStyle = '#E50000';

    if (this.XPercent !== 0 && this.YPercent !== 0) {
        // ** moves at correct angle (no rotation involved)

        // Get the difference between the points
        var tx = this.nextXPercent - this.XPercent;
        var ty = this.nextYPercent - this.YPercent;

        // Add the x and y areas then get the square root
        var dist = Math.sqrt(tx * tx + ty * ty);
        var newX = (tx / dist) * 0.1;
        var newY = (ty / dist) * 0.1;
        this.XPercent = this.XPercent + (isNaN(newX) ? 0 : newX);
        this.YPercent = this.YPercent + (isNaN(newY) ? 0 : newY);
    }

    var currentX = (w / 100) * this.XPercent;
    var currentY = (h / 100) * this.YPercent;

    ctx.translate(currentX - (playerWidth / 2), currentY);
    currentX = (playerWidth / 2);
    currentY = 0;

    // now rotate smoothly
    ctx.rotate(this.getRotation2(w, h, ctx) * Math.PI / 180);

    ctx.moveTo(currentX, currentY);
    ctx.lineTo(currentX - playerWidth, currentY - (playerHeight / 2));
    ctx.lineTo(currentX - playerWidth, currentY + (playerHeight / 2));
    ctx.fill();

    ctx.restore();
    ctx.closePath();
};

```

The above moves the arrow around with no rotation. My rotation method is as follows:

```
player.prototype.getRotation2 = function (w, h, ctx) {
    var y2 = this.nextYPercent;
    var y1 = this.YPercent.toFixed(0);
    var x2 = this.nextXPercent;
    var x1 = this.XPercent.toFixed(0);

    if (x1 == x2 && y2 == y1) {
        return this.angle;
    }

    var Xdiff = y2 - y1;
    var Ydiff = x2 - x1;

    this.angle %= 360;
    var rads = Math.atan2(y2 - y1, x2 - x1);
    var targetAngle = rads * (180 / Math.PI);
    targetAngle = (targetAngle + 360) % 360;

    if (this.angle != targetAngle) {
        var netAngle = (this.angle - targetAngle + 360) % 360;
        var delta = Math.min(Math.abs(netAngle - 360), netAngle, 5);

        var sign = (netAngle - 180) >= 0 ? 1 : -1;
        this.angle += sign * delta + 360;
        this.angle %= 360;

        if (this.hasBall) {
            // This is where we should position the circle at correct angle
            gameBall.XPercent = this.XPercent + ???
            gameBall.YPercent = this.YPercent + ???
        }
    }

    return this.angle;
};

```