웹 입문 초보입니다. 도움을구해요

책을보며 독학중입니다. 코드를따라하는데 원인모를에러가 자꾸발생하네요.

애초에 canvas변수에 아무것도 들어가질못하는거 같은데 

에러에서는 일단 event매개변수가 undefined여서 그런거라고 표현하는거같습니다.

토클사용법이 문제인가해서 jquery홈페이지글을 번역해놓은글도 살펴보고

event멤버변수 활용도살펴봤는데 분명맞구요 책이랑도 코드가완벽히같은데 ㅠㅠ..

도와주세요!

아래는 코드입니다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script>

        $(document).ready(function () {

            var canvas = document.getElementsByClassName('ca');

            var context = canvas.getContext('2d');

            $(canvas).toggle(

                function (event) {

                    var position = $(this).offset();

                    var x = event.pageX - position.left;

                    var y = event.pageY - position.top;

                    context.beginPath();

                    context.moveTo(x, y);

                },

                function (event) {

                    var position = $(this).offset();

                    var x = event.pageX - position.left;

                    var y = event.pageY - position.top;

                    context.lineTo(x, y);

                    context.stroke();

                });

        });

    </script>

</head>

<body>

    <canvas class="ca" width="500" height="500"></canvas>

</body>

</html>

에러내용 : 줄: 25

오류: 정의되지 않음 또는 null 참조인 'pageX' 속성을 가져올 수 없습니다.

뭐가잘못된걸까요 ㅠㅠ 도와주세요