How can I initiate Raphael.js?

StackOverflow https://stackoverflow.com/questions/23071183

  •  03-07-2023
  •  | 
  •  

Question 

        <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

Était-ce utile?

La solution

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>

Autres conseils

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top