Home/ Questions/Q 8239401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T20:08:03+00:00

I am simply trying to create some simple vector graphics using the Javascript Library

  • 0

I am simply trying to create some simple vector graphics using the Javascript Library Raphael. There should be a square object and a curved object, but nothing is being displayed. Can anyone help me. Thank you.

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript"> //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are running your Javascript far too early. Your browser will run Javascript as it reads it and if the DOM elements have not been loaded, it will not do anything.

    Try this:

    <html>
    <head>
        <script src="raphael.js"></script>
        <script src="jquery-1.7.2.js"></script>
    </head>

    <body>
        <div id="sample-2" style="width:500px; height:500px;"></div>
        <script type="text/javascript">
            //all your javascript goes here  
            var paper = Raphael("sample-2", 200, 100);
            var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
            var curvePath = paper.path("M110,10s55,25 40,80Z");

            rectPath.attr({
                fill: "green"
            });
            curvePath.attr({
                fill: "blue"
            });
        </script>
    </body>
</html>

    Enjoy and good luck!

    • 0