Edit in JSFiddle

$(document).ready(function() {
    var canvas = $("#myCanvas").get(0);
    var context = canvas.getContext("2d");
    var up = 90,
        right = 0,
        down = 270,
        left = 180;

    function WokkaWokka(size, direction, speed, posX, posY) {
        this.startAngle = 0.25;
        this.endAngle = 1.75;
        this.gapClosing = true;

        this.size = size;
        this.direction = direction;
        this.speed = speed;
        this.posX = posX;
        this.posY = posY;
    }

    var WokkaWokkaMan = new WokkaWokka(50, right, 10, 25, 25);

    function renderGrid(gridPixelSize, color) {
        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for (var i = 0; i <= canvas.height; i = i + gridPixelSize) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for (var j = 0; j <= canvas.width; j = j + gridPixelSize) {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

    function setAngles() {
        if (WokkaWokkaMan.startAngle <= 0) WokkaWokkaMan.gapClosing = true;
        else if (WokkaWokkaMan.startAngle > 0.25) WokkaWokkaMan.gapClosing = false;

        if (WokkaWokkaMan.gapClosing) {
            WokkaWokkaMan.startAngle = WokkaWokkaMan.startAngle + 0.05;
            WokkaWokkaMan.endAngle = WokkaWokkaMan.endAngle - 0.05;
        }
        else {
            WokkaWokkaMan.startAngle = WokkaWokkaMan.startAngle - 0.05;
            WokkaWokkaMan.endAngle = WokkaWokkaMan.endAngle + 0.05;
        }
    }

    function renderContent() {
        context.save();
        renderGrid(20, "red")
        context.beginPath();
        context.fillStyle = "Yellow";
        context.strokeStyle = "Yellow";
        context.save();
        context.translate(WokkaWokkaMan.posX, WokkaWokkaMan.posY);
        context.rotate(-WokkaWokkaMan.direction * Math.PI / 180);
        context.translate(-WokkaWokkaMan.posX, -WokkaWokkaMan.posY);
        context.arc(WokkaWokkaMan.posX, WokkaWokkaMan.posY, WokkaWokkaMan.size, (WokkaWokkaMan.startAngle) * Math.PI, (WokkaWokkaMan.endAngle) * Math.PI);
        context.lineTo(WokkaWokkaMan.posX, WokkaWokkaMan.posY);
        context.stroke();
        context.fill();
        context.restore();
        context.restore();
    }

    function animationLoop() {
        canvas.width = canvas.width;
        renderContent();
        setAngles();
        switch (WokkaWokkaMan.direction) {
        case up:
            WokkaWokkaMan.posY -= WokkaWokkaMan.speed;
            if (WokkaWokkaMan.posY <= 0) WokkaWokkaMan.direction = down;
            break;
        case down:
            WokkaWokkaMan.posY += WokkaWokkaMan.speed;
            if (WokkaWokkaMan.posY > 500) WokkaWokkaMan.direction = up;
            break;
        case left:
            WokkaWokkaMan.posX -= WokkaWokkaMan.speed;
            if (WokkaWokkaMan.posX < 0) WokkaWokkaMan.direction = right;
            break;
        case right:
            WokkaWokkaMan.posX += WokkaWokkaMan.speed;
            if (WokkaWokkaMan.posX > 500) WokkaWokkaMan.direction = left;
            break;
        }
        setTimeout(animationLoop, 33);
    }

    animationLoop();

    $("#up").click(function() {
        WokkaWokkaMan.direction = up;
    });
    $("#down").click(function() {
        WokkaWokkaMan.direction = down;
    });
    $("#left").click(function() {
        WokkaWokkaMan.direction = left;
    });
    $("#right").click(function() {
        WokkaWokkaMan.direction = right;
    });
});

<canvas id="myCanvas" width="500" height="500">
    <p>Canvas not supported.</p>
</canvas>
        
<input type="button" id="up" value="Up"/>
<input type="button" id="down" value="Down"/>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>

* {
    margin: 0; padding: 0;
}
html, body {
    height: 100%; width: 100%; background-color: #000;
}
canvas {
    display: block;
}
#up, #down, #left, #right {
    position: absolute;
    padding: 2px;
}
#up {
    top: 420px;
    left: 30px;
}
#left {
    top: 445px;
    left: 12px;
}
#right {
    top: 445px;
    left: 45px;
}
#down {
    top: 470px;
    left: 25px;
}