Why is my circle bouncing off a straight surface at an angle?

I have a ball and two straight vertical surfaces in my world.

When I apply force to the ball, I expect it to stay in a straight line, however, it seems to bounce off at an angle.

script: https://jsfiddle.net/zvjvvzeL/11/

var Engine = Matter.Engine,
        Render = Matter.Render,
        World = Matter.World,
        Bodies = Matter.Bodies,
        Body = Matter.Body,
        Vector = Matter.Vector,
        Events = Matter.Events;

    // create an engine
    var engine = Engine.create();

    var canvas = document.getElementById('canvas');

    engine.world.gravity.y = 0; // gravity not needed in this app

    // create a renderer
    var render = Render.create({
        element: document.body,
        canvas: canvas,
        engine: engine,
        options: {wireframes: true}
    });

    var ball_0 = Bodies.circle(100, 150, 11, {
        density: 0.04,
        frictionAir: 0.06,
        restitution: 0.8,
        friction: 0.3
    });

    var cushion_left = Bodies.rectangle(34, 160, 100, 208, { isStatic: true });
    var cushion_right = Bodies.rectangle(492, 160, 100, 208, { isStatic: true });

    // add all of the bodies to the world
    World.add(engine.world, [cushion_left, cushion_right, ball_0]);

    render.options.height = 300;
    canvas.height = 300;
    Engine.run(engine);
    Render.run(render);

    Body.applyForce(ball_0, { x: 0, y: 0 }, { x: 0.5, y: 0 });