Gostaria de fazer com que toda vez que o eixo X for igual a 0 ou a 600 o eixo Y ser incrementado em 20, mas so consegui fazer isso na diagonal.

<meta charset="UTF">

<canvas width="600" height="400"></canvas>

<script>

    var canvas = document.querySelector("canvas");
    var brush = canvas.getContext("2d");
    var color = ["red", "yellow", "green"];
    var countColor = 0;

    function drawCircle(x, y, raio) {


        brush.fillStyle = color[countColor];
        brush.beginPath();
        brush.arc(x, y, raio, 0, 2*Math.PI);
        brush.strokeStyle = "navy";
        brush.stroke();
        brush.lineWidth = 4;
        brush.fill();
        countColor++;

        if(countColor > color.length) {

            countColor = 0;
        }

    }

    function clearCanvas() {

        brush.clearRect(0, 0, 600, 400);

    }

    var x = 40;
    var y = 25;
    var raio = 9;
    var increaseRaio = 0;
    var path = 1;
    var pathY = 10;    

    function updateCanvas() {        

        clearCanvas();        

        brush.fillStyle = "lightgreen"
        brush.fillRect(0,0,600,400);

        if(raio > 30){

            increaseRaio = -1;

        } else if(raio < 10){

            increaseRaio = 1;
        }

        if(x > 600) {

            path = - 1;

        } else if (x < 0) {

            path = 1;

        } else if (y > 380) {

            pathY = -10;

        } else if(y < 0) {

            pathY = 10;
        }

        drawCircle(x, y, raio);
        raio = raio + increaseRaio;
        x = x + path;
        y = y + pathY;
    }

    setInterval(updateCanvas, 100);
</script>