Cor undifined

Meu código ficou bem parecido, com algumas pequenas alterações, como por exemplo, gostaria de informar o usuário com um alert qual é a cor que está selecionada no momento, antes dele necessariamente aplicar sobre o canvas, porém ao retornar para a cor azul, ao invés dele informar que se trata da mesma, o alert informa que a cor é undefined, porém a mesma está correta ao aplicar no canvas, por que isso acontece e como poderia solucionar esse problema?

<script>
        var sheet = document.querySelector('canvas');
        var brush = sheet.getContext('2d');

        colors = ['blue', 'red', 'green'];
        i = 0;

        function drawCircle (event) {
            var x = event.pageX;
            var y = event.pageY;

            brush.fillStyle = colors[i];
            brush.beginPath();
            brush.arc(x, y, 10, 0, 2 * 3.14);
            brush.fill();
        }

        sheet.onclick = drawCircle;

        function changeColor() {
            i++;
            alert('Now the color of brush is ' + colors[i]);
            if(i >= 3){
                i = 0;
            }
            return false;
        }

        sheet.oncontextmenu = changeColor;
    </script>