views:

54

answers:

1

i want draw a circle on my webpage so i have downloaded two different javascript for drawing a circle.one of js file is downloaded from http://jsdraw2d.jsfiction.com/ then i have use its function to draw circle but circle is not shown on html page i have try both internet explorer and mozilla firefox but niether it give error nor it will draw circle so what are reson behind this. same problrm arise when using both js file.

thanks in advance

<HEAD>
 <TITLE> New Document </TITLE>
 <script type="text/javascript" src="wz_jsgraphics/wz_jsgraphics.js"></script>
 <script type="text/javascript">
 function myDrawFunction()
 {


   jg2.setColor("#0000ff"); // blue
   jg2.drawEllipse(10, 50, 230, 100);
   jg2.drawRect(400, 10, 100, 50);
   jg2.paint();
    alert("hi");
}
var jg2 = new jsGraphics(document.getElementById("canvas"));
</script>

<BODY >
<div id="canvas" style="overflow:hidden;position:relative;width:600px;height:300px;"></div> 
<input type="submit" onclick="myDrawFunction()" value="Click"> 
<p> hi this is paragraph</p>
</div>
</BODY>
+2  A: 

You are using document.getElementById before the page did load!

var jg2 = new jsGraphics(document.getElementById("canvas"));

Is called in your head as soon as it is parsed.

Change it to:

var jg2 = null;
function myDrawFunction()
 {
    if(jg2 == null)
       jg2 = new jsGraphics(document.getElementById("canvas"));
    jg2.setColor("#0000ff"); // blue
    jg2.drawEllipse(10, 50, 230, 100);
    jg2.drawRect(400, 10, 100, 50);
    jg2.paint();
    alert("hi");
}
Ghommey