CODEWITHSUNDEEP
raphael
Jack
Jack

Reputation: 2285

How can I initiate Raphael.js?

        <script type="text/javascript" src="raphael.js"></script>
    <script>
        var paper = new Raphael("holder", 320, 200);
        function testPaper(){
            var width10 = paper.width * 0.1;
            var height10 = paper.height * 0.1;
            var width80 = paper.width * 0.8;
            var height80 = paper.height * 0.8
            var c = paper.rect( width10, height10, width80, height80, Math.min( width10, height10 ) );
    }
    </script>
</head>
<body onload = "testPaper()">
    <div id="holder"></div>
</body>

What's wrong with the above code? I've been trying to get Raphael working for over an hour now & it always complains:

Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11

Upvotes: 3

Views: 2029

Answers (2)

GeorgiG
GeorgiG

Reputation: 1103

I had the same problem using draw2d library in Angular. I couldn't initialize the canvas. It's worth to note that the element MUST have the same name as the initialized canvas.

Upvotes: 1

user2864740
user2864740

Reputation: 61875

The script that uses Raphael is probably running before the "holder" element has been created.

Either create the Raphael in a ready/onload event or trivially arrange the HTML like so:

<body>
    <div id="holder"></div> <!-- also use correct closing tag -->
    <script src="raphael.js"></script>
    <script>
        var paper = new Raphael("holder", 320, 200);
        // ..
    </script>
</body>

Upvotes: 6

Related Questions