468,507 Members | 1,692 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,507 developers. It's quick & easy.

How to draw a line

Hi,
I'm new to javascript.I want to draw line,circle using JavaScript vector-draw library.Following is my coding,but it doesn't work.Please help me to improve that....


[HTML]<html>
<body>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<div id="myCanvas" style="position:relative;height:250px;width:100%;" ></div>
<div id="anotherCanvas" style="position:relative;height:100px;width:300px; "></div>


function myDrawFunction()
{
jg_doc.setColor("#00ff00");
jg_doc.fillEllipse(100, 200, 100, 180);
jg_doc.setColor("maroon");
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
jg_doc.paint();

jg.setColor("#ff0000");
jg.drawLine(10, 113, 220, 55);
jg.setColor("#0000ff");
jg.fillRect(110, 120, 30, 60);
jg.paint();

jg2.setColor("#0000ff");
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();


jg.drawLine(20,50,453,40);
}

var jg_doc = new jsGraphics();
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

myDrawFunction();

//-->
</script>
</body>
</html>[/HTML]
Jan 24 '07 #1
7 3987
acoder
16,027 Expert Mod 8TB
Welcome to TheScripts.

I found the js file that you are using, the documentation is available here which you have probably seen.

First of all, you need to include the library in the head section not the body section:
[HTML]<head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
</head>
<body>...[/HTML]
Secondly, your code is not inside script tags. Before myDrawFunction, add the following:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3.  
That should make it work. If you need more help, post again.
Jan 24 '07 #2
Thanks a lot...........
It works very nicely!!!!!!!!!!!
Jan 24 '07 #3
acoder
16,027 Expert Mod 8TB
No problem, you're welcome.
Jan 24 '07 #4
Hi,
I have used the same coding and i am able to see the line and ellipse etc.if i call it directly from javascript.
I want to draw the line from my function say calldrawline();
Also i m using this in my mapping application so i want it on my map for my lats and lons values .but line is not shown in my function. I want to add it in my maps div.
If anyone has any idea plz reply me immidiately it is very urgent....

byee...
Jan 9 '08 #5
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!
Hi,
I have used the same coding and i am able to see the line and ellipse etc.if i call it directly from javascript.
I want to draw the line from my function say calldrawline();
Also i m using this in my mapping application so i want it on my map for my lats and lons values .but line is not shown in my function. I want to add it in my maps div.
Post your code or a link to a test page.
Jan 9 '08 #6
Welcome to TSDN!
Post your code or a link to a test page.
Hai,
The same code as above is not working for me. Could u please help me out what would be the mistake. The code is as follows:

[HTML]<html>
<head>

<script type="text/javascript" src="wz_jsgraphics.js"></script>

</head>
<body>

<div id="myCanvas" style="position:relative;height:250px;width:100%;" ></div>
<div id="anotherCanvas" style="position:relative;height:100px;width:300px; "></div>

<script type="text/javascript">
<!--


function myDrawFunction()
{
jg_doc.setColor("#00ff00");
jg_doc.fillEllipse(100, 200, 100, 180);
jg_doc.setColor("maroon");
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
jg_doc.paint();

jg.setColor("#ff0000");
jg.drawLine(10, 113, 220, 55);
jg.setColor("#0000ff");
jg.fillRect(110, 120, 30, 60);
jg.paint();

jg2.setColor("#0000ff");
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();


jg.drawLine(20,50,453,40);
}

var jg_doc = new jsGraphics();
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");



myDrawFunction();

//-->
</script>

</body>
</html>[/HTML]
Mar 11 '08 #7
acoder
16,027 Expert Mod 8TB
Hai,
The same code as above is not working for me. Could u please help me out what would be the mistake.
It should work. Perhaps the script is in a different directory. Do you get any errors?
Mar 11 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Matt | last post: by
4 posts views Thread by thomasp | last post: by
2 posts views Thread by dan heskett | last post: by
reply views Thread by news | last post: by
4 posts views Thread by Jason Huang | last post: by
1 post views Thread by balakrishnan.dinesh | last post: by
3 posts views Thread by Daniel Mark | last post: by
1 post views Thread by IvoShalev | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.