If you dream about having the abilty to draw from JavaScript, this applet class is the one you need! The JavascriptDraw applet implements a simple graphical interface to JavaScript. You can begin to draw using this applet as a template for your drawing. The JavascriptDraw class also allows you to handle a number of events. You only need to specify your JavaScript functions which will determine these events. I hope this flexible tool will help you to make your pages more interactive and enjoyable.
| drawLine | drawOval | drawArc | drawString | drawRect and fillRect |
| drawImage | fillOval | fillArc | draw3DString | draw3DRect |
Name |
Value |
| AUTHOR | Value of this obligatory parameter should be: "Maxim V. Kollegov (http://www.oocities.org/siliconvalley/lakes/8620)" |
| IMAGE0 .............. IMAGE19 |
Optional parameters. If you are planning to draw images from your applet you need to specify images before using them as applet parameters. You can specify up to 20 images to use. These images should be numbered from 0 to n sequentially. You will be able to use the images by number only when using the drawImage() method. |
| MOUSEOVERHANDLER | Optional parameters. The Value chosen should be the name of the JavaScript function in order to determine the event in the applet area. This Event handling functions has two additional arguments: x and y coordinates of the event. |
| MOUSEOUTHANDLER | |
| MOUSEDOWNHANDLER | |
| MOUSEUPHANDLER | |
| MOUSEMOVEHANDLER |
setColor(int color)
drawRect(int xfrom, int yfrom, int rectangle_width, int rectangle_height) fillRect(int xfrom, int yfrom, int rectangle_width, int rectangle_height) fill3DRect(int xfrom, int yfrom, int rectangle_width, int rectangle_height,boolean style)
drawOval(int x1, int y1, int oval_width, int oval_height) fillOval(int x1, int y1, int oval_width, int oval_height)
fillArc(int x, int y, int oval_widh, oval_height, int start_angle, int end_angle)
setFont(String fontname,int fontstyle,int fontsize)
drawString(String s, int x, int y) draw3DString(String s, int x, int y, boolean style)
drawImage(int imagenumber, int x, int y) drawImage(int imagenumber, int x, int y, int image_width, int image_height)
repaint()
ready
To host the applet on your page you have to write an applet tag in your document. I have given you an example of it below. MAYSCRIPT statement in applet's tag, inform the browser, that applet can call upon java script functions. You do not need to write MAYSCRIPT if you do not plan to handle events. However, let's suppose that you would like to handle some events which would produce some very interesting results.
<APPLET NAME=javadraw CODE=javascriptdraw.class WIDTH=400 HEIGHT=150 MAYSCRIPT> <PARAM NAME=AUTHOR VALUE="Maxim V. Kollegov (http://www.oocities.org/siliconvalley/lakes/8620)"> <PARAM NAME="IMAGE0" VALUE="imagebackground.gif"> <PARAM NAME="IMAGE1" VALUE="myImage1.jpg"> <PARAM NAME="MOUSEOVERHANDLER" VALUE="overHandler"> <PARAM NAME="MOUSEOUTHANDLER" VALUE="outHandler"> </APPLET>
Then inside <HEAD> tag you will write your JavaScript. Here is the template for initializing the function which should be called from document <BODY onLoad="initialize()"> .
<SCRIPT>
var appletready=false; // two variables to make life easy var jd;
function initialize()
{jd=document.javadraw; //document.javadraw is too long to write each time.
if(jd!=null) //check applet was loaded OK.
{if(jd.ready) //check applet finished to initialize itself
{appletready=true; //set variable appletready for use in other functions
// .............
// add here your own drawing script
// anything you want to draw when document finished loading
// .............
return; //normally exit init process
}
}
//initialization impossible, applet still not ready
//set timeout and try again in 200 mS.
setTimeout("initialize",200);
}
</SCRIPT>
To make life easier we'll create, in the above example, a jd variable and initialize it with the document javadraw . Remember that "javadraw" is an applet NAME in the APPLET tag. So we could apply some applet methods and properties. When we are referring or applying the property "jd.ready", we achieve a state of readiness from the applet and if the applet is ready then we store it in a JavaScript variable to use it at a future time. If the applet isn't ready (loading images for example) then this function will set timeout in order to call upon itself and try again 200 mS later.
This applet implements doublebuffering for eliminating flashing and the appearance of incomplete drawings. It means that you do not draw on the screen directly, but on some background image, and this image will be drawn in the applet field only after you call the repaint() method. After executing the applet initialize(), or just from this function, you can call some other drawing functions. The example below demonstrates draw filled Ovals when you click on the "fillOval" link. Hope there is no need to explain that this link should contain onClick="ovalExample()" .
function ovalExample()
{if(appletready) // check is applet ready?
{jd.setColor(0xA06000); // choose background color
jd.fill3DRect(210,10,180,130,true); // and clear area to draw
for(i=0;i<6; i++)
{jd.setColor((i*40)<<8); // set new color to draw
k=(6-i)*10;
jd.fillOval(300-k,75-k,k*2,k*2); // and draw
}
jd.repaint(); // do not forget to repaint..
return; // otherwise you drawing will remain unvisible
// until browser window redraw.
}
}
The last thing necessary to explain is the event processing. In the above example, the applet tag contains the parameter MOUSEOVERHANDLER which has the value "overHandler". The parameter tells the applet what function should be called upon when the applet detects the event (in this example, the mouse entered the applet field). So it will call a JavaScript function named "overHandler". Below is the example of this function which sets the parameters in HTML form named myform with field handlers,x and y, as in the above demo.
function overHandler(x,y)
{document.myform.handler.value="MOUSEOVERHANDLER called"
document.myform.x.value=x;
document.myform.y.value=y;
}