How to draw a line - Javascript

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

Subscribe Post Reply

4193

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

 <script type="text/javascript">

<!--

That should make it work. If you need more help, post again.

Jan 24 '07 #2

saathujaya

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

vidyarani

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

sweetsathish

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">

</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

Similar topics

recursively draw the line

by: Matt | last post by:

I am writing a recursive program to draw the lines recursively, given the range and number of intervals (n) between the range. The problem is I don't know how to draw the line in point 0.375, as...

C / C++

Draw line VB2005

by: thomasp | last post by:

I found the following code on MSDN to draw a line in VB2005. Public Sub DrawLinePoint(ByVal e As PaintEventArgs) ' Create pen. Dim blackPen As New Pen(Color.Black, 3) ' Create points that...

Visual Basic .NET

Owner-Draw ListBox problems

by: dan heskett | last post by:

I am owner-drawing a listbox, in an attempt to create a nice list with some custom "fields" and text layout. Essentially it works, but I must be missing something big, conceptually, because I...

Visual Basic .NET

mogrify -draw text stopped working after upgrade

by: news | last post by:

If anyone can recommend a more appropriate newsgroup for this question? We recently upgraded from php 4.1.2 to php 4.3.9 and ImageMagick 5.5.7 to version 6.2.5. I have a script that creates a...

PHP

How to draw a line in a Windows Form?

by: Jason Huang | last post by:

Hi, In my C# Windows Form, how do I draw a Line? Thanks for help. Jason

C# / C Sharp

line wont draw after button click but draws after tab or alt keypr

by: Rich | last post by:

Hello, I have a form with a panel which contains a radiobutton. When I click the radiobutton, I invoke the Paint event of the panel using me.Invalidate. The paint event gets called and runs...

Visual Basic .NET

how to draw line dynamically between two points

by: balakrishnan.dinesh | last post by:

Hi frnds, Im creating function to plot line graph in javascript . I have marked the points in graph. but what i need to do is, i want to draw the line between those marked point, but i dont...

Javascript

Do we need to delete "ImageDraw.Draw" after using it?

by: Daniel Mark | last post by:

Hello all: I am looking the sample code posted on PIL website http://www.pythonware.com/library/pil/handbook/imagedraw.htm ################################################ <<Draw a Grey Cross...

Python

HOW TO DRAW STUFF USING <graphics.h> ?

by: IvoShalev | last post by:

Hi there, I just want to give some sudgestions on how to draw some plain things only using the header file <graphics.hand of course the standart files <stdio.h<conio.h<stdlib.h>. First of All...

C / C++

Is it possible to draw lines between two froms?

by: zhaow | last post by:

Hi, All Greetings! I want to develop as appllication that requires a line-drawing function in the blank area between two forms. I have looked up the MSDN, it says that a graphics object need a...

C# / C Sharp

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++