DIR : /home/kozerus/public_html/js/wz/wz_graphics2.htm
/home/kozerus/public_html/js/wz
<!DOCTYPE html>
<html><head>
<span id="line2"></span></span><span><<span class="start-tag">html</span>></span><span>
<span id="line3"></span></span><span><<span class="start-tag">head</span>></span><span>
<span id="line4"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">expires</a>" <span class="attribute-name">content</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line5"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">content-type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">text/html; charset=iso-8859-1</a>"></span><span>
<span id="line6"></span></span><span><<span class="start-tag">title</span>></span><span>DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript</span><span></<span class="end-tag">title</span>></span><span>
<span id="line7"></span></span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/newwalterzorn.css">../newwalterzorn.css</a>"></span><span>
<span id="line8"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/scripts/wz_jsgraphics.js">../scripts/wz_jsgraphics.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line9"></span></span><span></<span class="end-tag">head</span>></span><span>
<span id="line10"></span></span><span><<span class="start-tag">body</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line11"></span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">top</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span>
<span id="line12"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/jsgraphics/jsgraphics.htm">http://www.walterzorn.de/jsgraphics/jsgraphics.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/germany.gif">../images/germany.gif</a>" <span class="attribute-name">align</span>="<a class="attribute-value">middle</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">German version</a>" <span class="attribute-name">width</span>="<a class="attribute-value">22</a>" <span class="attribute-name">height</span>="<a class="attribute-value">15</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span> </span><span><<span class="start-tag">small</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/jsgraphics/jsgraphics.htm">http://www.walterzorn.de/jsgraphics/jsgraphics.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>German version</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">small</span>></span><span>
<span id="line13"></span> </span><span><<span class="start-tag">center</span>></span><span>
<span id="line14"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line15"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line16"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/index.htm">../index.htm</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">logo</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/logo.gif">../images/logo.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">home</a>" <span class="attribute-name">width</span>="<a class="attribute-value">278</a>" <span class="attribute-name">height</span>="<a class="attribute-value">30</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line17"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line18"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line19"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellspacing</span>="<a class="attribute-value">12</a>"></span><span>
<span id="line20"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line21"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML, JavaScript: Draw Ellipse, Oval, Circle, Polygon, Triangle, Rectangle, Line, Polyline</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/index.htm">../index.htm</a>"></span><span>Home</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line22"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/dragdrop/dragdrop_e.htm">../dragdrop/dragdrop_e.htm</a>"></span><span>DHTML-Drag<span class="entity"><span>&</span>amp;</span>Drop-Library</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line23"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm">../tooltip/tooltip_e.htm</a>"></span><span>Tooltips</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line24"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/grapher/grapher_e.htm">../grapher/grapher_e.htm</a>"></span><span>Function-Grapher</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line25"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line26"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line27"></span> </span><span></<span class="end-tag">center</span>></span><span>
<span id="line28"></span></span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">main</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;height:230px;width:100%;</a>"></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">height</span>="<a class="attribute-value">230</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line29"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line30"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line31"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">80</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>" <span class="attribute-name">width</span>="<a class="attribute-value">80</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line32"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line33"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line34"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line35"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line36"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>DHTML, JavaScript
<span id="line37"></span> </span><span><<span class="start-tag">br</span>></span><span>Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle.</span><span></<span class="end-tag">big</span>></span><span>
<span id="line38"></span> </span><span><<span class="start-tag">br</span>></span><span>High Performance JavaScript Vector Graphics Library.</span><span></<span class="end-tag">b</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line39"></span> </span><span><<span class="start-tag">small</span>></span><span>Developed by Walter Zorn</span><span></<span class="end-tag">small</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line40"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line41"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">4</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line42"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line43"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line44"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML, JavaScript: Draw Ellipses, Ovals, Circles, Polygons, Triangles, Rectangles, Lines, Polylines</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line45"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line46"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line47"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line48"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>Performance?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line49"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line50"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#browser">#browser</a>"></span><span>Cross Browser?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line51"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line52"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#docu">#docu</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line53"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line54"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#download">#download</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line55"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line56"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line57"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line58"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line59"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line60"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line61"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line62"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line63"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line64"></span> This JavaScript VectorGraphics library provides graphics capabilities for JavaScript:
<span id="line65"></span> functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage.
<span id="line66"></span> Usage of this Vector Graphics library should be easy even if you don't have JavaScript experience. </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#docu">#docu</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>.
<span id="line67"></span> Another goal during development of this JavaScript Draw Shapes Vector Graphics Library was to achieve optimized </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>performance</span><span></<span class="end-tag">a</span>></span><span> and cleanly arranged pixel stair-step patterns (pixel-optimization).
<span id="line68"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line69"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line70"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line71"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line72"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Try it out:</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line73"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line74"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line75"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line76"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line77"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line78"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line79"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line80"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line81"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line82"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>"></span><span>
<span id="line83"></span> </span><span><<span class="start-tag">form</span> <span class="attribute-name">action</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm"></a>"></span><span>
<span id="line84"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line85"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line86"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">style</span>="<a class="attribute-value">width:100%</a>" <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">drawLine()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line87"></span> </span><span><<span class="start-tag">td</span>></span><span>x1</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dl_x1</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">50</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line88"></span> </span><span><<span class="start-tag">td</span>></span><span>y1</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dl_y1</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">-330</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line89"></span> </span><span><<span class="start-tag">td</span>></span><span>x2</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dl_x2</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">500</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line90"></span> </span><span><<span class="start-tag">td</span>></span><span>y2</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dl_y2</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">800</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line91"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line92"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line93"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line94"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line95"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">style</span>="<a class="attribute-value">width:100%</a>" <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">drawRect()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line96"></span> </span><span><<span class="start-tag">td</span>></span><span>x</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dr_x</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">130</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line97"></span> </span><span><<span class="start-tag">td</span>></span><span>y</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dr_y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">20</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line98"></span> </span><span><<span class="start-tag">td</span>></span><span>w</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dr_w</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">350</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line99"></span> </span><span><<span class="start-tag">td</span>></span><span>h</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">dr_h</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">60</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line100"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line101"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line102"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line103"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line104"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">style</span>="<a class="attribute-value">width:100%</a>" <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">fillRect()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line105"></span> </span><span><<span class="start-tag">td</span>></span><span>x</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fr_x</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">-70</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line106"></span> </span><span><<span class="start-tag">td</span>></span><span>y</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fr_y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">130</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line107"></span> </span><span><<span class="start-tag">td</span>></span><span>w</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fr_w</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">160</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line108"></span> </span><span><<span class="start-tag">td</span>></span><span>h</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fr_h</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">100</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line109"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line110"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line111"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line112"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>
<span id="line113"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">fillPolygon()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line114"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">6</a>"></span><span>
<span id="line115"></span> x</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fp_x</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">25</a>" <span class="attribute-name">value</span>="<a class="attribute-value">80,126,-30,-60</a>"></span><span><span class="entity"><span>&</span>nbsp;</span>y</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fp_y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">25</a>" <span class="attribute-name">value</span>="<a class="attribute-value">0,130,40,100</a>"></span><span>
<span id="line116"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line117"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line118"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line119"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">style</span>="<a class="attribute-value">width:100%</a>" <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">drawEllipse()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line120"></span> </span><span><<span class="start-tag">td</span>></span><span>x</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">do_x</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">320</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line121"></span> </span><span><<span class="start-tag">td</span>></span><span>y</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">do_y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">-20</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line122"></span> </span><span><<span class="start-tag">td</span>></span><span>w</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">do_w</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">3</a>" <span class="attribute-name">value</span>="<a class="attribute-value">250</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line123"></span> </span><span><<span class="start-tag">td</span>></span><span>h</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">do_h</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">140</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line124"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line125"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line126"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line127"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line128"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">style</span>="<a class="attribute-value">width:100%</a>" <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">fillEllipse()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line129"></span> </span><span><<span class="start-tag">td</span>></span><span>x</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fo_x</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">75</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line130"></span> </span><span><<span class="start-tag">td</span>></span><span>y</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fo_y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">140</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line131"></span> </span><span><<span class="start-tag">td</span>></span><span>w</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fo_w</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">3</a>" <span class="attribute-name">value</span>="<a class="attribute-value">240</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line132"></span> </span><span><<span class="start-tag">td</span>></span><span>h</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fo_h</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">400</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line133"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line134"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line135"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line136"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line137"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">style</span>="<a class="attribute-value">width:100%</a>" <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">value</span>="<a class="attribute-value">fillArc()</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">DRAW(this.value)</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line138"></span> </span><span><<span class="start-tag">td</span>></span><span>x</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fa_x</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">350</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line139"></span> </span><span><<span class="start-tag">td</span>></span><span>y</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fa_y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">140</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line140"></span> </span><span><<span class="start-tag">td</span>></span><span>w</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fa_w</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">240</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line141"></span> </span><span><<span class="start-tag">td</span>></span><span>h</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fa_h</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">400</a>"></span><span><span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line142"></span> </span><span><<span class="start-tag">td</span>></span><span>arc<span class="entity"><span>&</span>nbsp;</span>begin</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fa_angA</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">6</a>" <span class="attribute-name">value</span>="<a class="attribute-value">25</a>"></span><span><span class="entity"><span>&</span>deg;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line143"></span> </span><span><<span class="start-tag">td</span>></span><span>arc<span class="entity"><span>&</span>nbsp;</span>end</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">fa_angZ</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">6</a>" <span class="attribute-name">value</span>="<a class="attribute-value">290</a>"></span><span><span class="entity"><span>&</span>deg;</span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line144"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line145"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line146"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">7</a>"></span><span>
<span id="line147"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line148"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line149"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line150"></span> setColor(<span class="entity"><span>&</span>quot;</span>#</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">Color</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">7</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">6</a>" <span class="attribute-name">value</span>="<a class="attribute-value">00aaaa</a>"></span><span><span class="entity"><span>&</span>quot;</span>)
<span id="line151"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line152"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line153"></span> setStroke(</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">Stroke</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">3</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">2</a>" <span class="attribute-name">value</span>="<a class="attribute-value">4</a>"></span><span>)
<span id="line154"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line155"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line156"></span> setStroke(Stroke.DOTTED</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">Dotted</a>" <span class="attribute-name">type</span>="<a class="attribute-value">checkbox</a>"></span><span>)
<span id="line157"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line158"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line159"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line160"></span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">button</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-weight:bold;width:290px;</a>" <span class="attribute-name">value</span>="<a class="attribute-value">clear() this test area</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(jg2)jg2.clear();</a>"></span><span>
<span id="line161"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line162"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line163"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line164"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">7</a>" <span class="attribute-name">height</span>="<a class="attribute-value">250</a>"></span><span>
<span id="line165"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">dt</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;left:-80px;top:10px;height:1px;</a>"></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line166"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">test</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;left:0px;top:0px;width:400px;height:250px;z-index:2;overflow:visible;</a>"></span><span></span><span><<span class="start-tag">center</span>></span><span></span><span><<span class="start-tag">small</span>></span><span>Test Canvas</span><span></<span class="end-tag">small</span>></span><span></span><span></<span class="end-tag">center</span>></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line167"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line168"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line169"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line170"></span> </span><span></<span class="end-tag">form</span>></span><span>
<span id="line171"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line172"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line173"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line174"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line175"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line176"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line177"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line178"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line179"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line180"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line181"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line182"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line183"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line184"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line185"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">80</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>" <span class="attribute-name">width</span>="<a class="attribute-value">80</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line186"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line187"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line188"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line189"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line190"></span> Here's an example of </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/demos/animarc.htm">demos/animarc.htm</a>"></span><span>how to animate (rotate) a vectorgraphic</span><span></<span class="end-tag">a</span>></span><span>.
<span id="line191"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line192"></span> Or see </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/dragdrop/demos/drawonimg.htm">../dragdrop/demos/drawonimg.htm</a>"></span><span>how to draw onto an image</span><span></<span class="end-tag">a</span>></span><span>, using the image itself as canvas
<span id="line193"></span> (this example uses my </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/dragdrop/dragdrop_e.htm">../dragdrop/dragdrop_e.htm</a>"></span><span>DHTML-Drag<span class="entity"><span>&</span>amp;</span>Drop-Library</span><span></<span class="end-tag">a</span>></span><span>).
<span id="line194"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line195"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line196"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line197"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line198"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">performance</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>Performance</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line199"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">4</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line200"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line201"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line202"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML, JavaScript: Draw Ellipse, Oval, Circle, Polygon, Triangle, Rectangle, Line, Polyline</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line203"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line204"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line205"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line206"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#top">#top</a>"></span><span>Top of Page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line207"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line208"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>Performance?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line209"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line210"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#browser">#browser</a>"></span><span>Cross Browser?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line211"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line212"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#docu">#docu</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line213"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line214"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#download">#download</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line215"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line216"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line217"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line218"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line219"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line220"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line221"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line222"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line223"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line224"></span> In HTML there are no such elements as oblique lines, circles, ellipses or other non-rectangularly bounded elements available.
<span id="line225"></span> For a workaround, pixels might be painted by creating small background-colored layers (DIV elements), and arranging these to the desired pattern.
<span id="line226"></span> Creating a separate DIV for each pixel of the pattern, however, would be very inefficient since each of these DIVs inevitably had to lug its complete browser-internal object overhead.
<span id="line227"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line228"></span></span><span><!</span><span>--
<span id="line229"></span>function drwRcEx(hnd, left, top, width, height, crFg, crBg)
<span id="line230"></span>{
<span id="line231"></span> hnd.setColor(crBg);
<span id="line232"></span> hnd.fillRect(left, top, width, height);
<span id="line233"></span> hnd.setColor(crFg);
<span id="line234"></span> hnd.drawRect(left, top, width, height);
<span id="line235"></span>}
<span id="line236"></span>
<span id="line237"></span>function drwPxOv(hnd, left, top, width, height, fact, crFg, crBg, bad)
<span id="line238"></span>{
<span id="line239"></span> var a = width>>1, b = height>>1,
<span id="line240"></span> cx = left + a*fact, cy = top + b*fact,
<span id="line241"></span> x = 0, y = b,
<span id="line242"></span> ox = 0, oy = b,
<span id="line243"></span> a2 = (a*a)</span><span><<</span><span></span><span>1</span><span>, b2 = (b*b)</span><span><<</span><span></span><span>1</span><span>,
<span id="line244"></span> st = (a2>>1)*(1-(b</span><span><<</span><span></span><span>1</span><span>)) + b2,
<span id="line245"></span> tt = (b2>>1) - a2*((b</span><span><<</span><span></span><span>1</span><span>)-1);
<span id="line246"></span> if (bad) drwRcEx(hnd, cx+fact*x, cy-fact*y, fact, fact, crFg, crBg);
<span id="line247"></span> do
<span id="line248"></span> {
<span id="line249"></span> if (st</span><span><0</span><span>)
<span id="line250"></span> {
<span id="line251"></span> st += b2*((x</span><span><<</span><span></span><span>1</span><span>)+3);
<span id="line252"></span> tt += (b2</span><span><<</span><span></span><span>1</span><span>)*(x+1);
<span id="line253"></span> x++;
<span id="line254"></span> }
<span id="line255"></span> else if (tt</span><span><0</span><span>)
<span id="line256"></span> {
<span id="line257"></span> st += b2*((x</span><span><<</span><span></span><span>1</span><span>)+3) - (a2</span><span><<</span><span></span><span>1</span><span>)*(y-1);
<span id="line258"></span> tt += (b2</span><span><<</span><span></span><span>1</span><span>)*(x+1) - a2*((y</span><span><<</span><span></span><span>1</span><span>)-3);
<span id="line259"></span> x++;
<span id="line260"></span> y--;
<span id="line261"></span> if(!bad)
<span id="line262"></span> drwRcEx(hnd, cx+fact*ox, cy-fact*oy, fact*(x-ox), fact*(oy-y), crFg, crBg);
<span id="line263"></span> ox = x;
<span id="line264"></span> oy = y;
<span id="line265"></span> }
<span id="line266"></span> else
<span id="line267"></span> {
<span id="line268"></span> st -= (a2</span><span><<</span><span></span><span>1</span><span>)*(y-1);
<span id="line269"></span> tt -= a2*((y</span><span><<</span><span></span><span>1</span><span>)-3);
<span id="line270"></span> y--;
<span id="line271"></span> }
<span id="line272"></span> if(bad)
<span id="line273"></span> drwRcEx(hnd, cx+fact*x, cy-fact*y, fact, fact, crFg, crBg);
<span id="line274"></span> }
<span id="line275"></span> while (y>0);
<span id="line276"></span> if (!bad) drwRcEx(hnd, cx+fact*ox, cy-fact*oy, fact*(a-ox+1), fact*(oy+1), crFg, crBg);
<span id="line277"></span>}
<span id="line278"></span>
<span id="line279"></span>
<span id="line280"></span>
<span id="line281"></span>/////////////// Pixel stairs demo ///////////////
<span id="line282"></span>var jg = new jsGraphics();
<span id="line283"></span>
<span id="line284"></span>jg.htm += '</span><span><t</span><span>able align="left" width="354" cellpadding="0"></span><span><t</span><span>r></span><span><t</span><span>d height="150" valign="top"></span><span><d</span><span>iv id="stairsdemo" style="position:relative;width:350px;height:150px;">';
<span id="line285"></span>
<span id="line286"></span>jg.setFont("verdana,geneva,sans-serif", "10px", Font.PLAIN);
<span id="line287"></span>jg.setColor("#ee8800");
<span id="line288"></span>jg.drawString("Image dynamically drawn with wz_jsgraphics.js", 0, 2);
<span id="line289"></span>
<span id="line290"></span>jg.setFont("verdana,geneva,sans-serif", "11px", Font.PLAIN);
<span id="line291"></span>jg.setColor("#ffbbdd");
<span id="line292"></span>jg.fillRect(0, 25, 30, 10);
<span id="line293"></span>jg.fillRect(20, 35, 30, 10);
<span id="line294"></span>jg.fillRect(40, 45, 30, 10);
<span id="line295"></span>jg.fillRect(60, 55, 10, 20);
<span id="line296"></span>jg.fillRect(70, 65, 10, 30);
<span id="line297"></span>jg.fillRect(80, 85, 10, 30);
<span id="line298"></span>jg.setColor("#cc0000");
<span id="line299"></span>jg.drawString("worst", 10, 129);
<span id="line300"></span>jg.drawRect(0, 25, 10, 10);
<span id="line301"></span>jg.drawRect(10, 25, 10, 10);
<span id="line302"></span>jg.drawRect(20, 25, 10, 10);
<span id="line303"></span>jg.drawRect(20, 35, 10, 10);
<span id="line304"></span>jg.drawRect(30, 35, 10, 10);
<span id="line305"></span>jg.drawRect(40, 35, 10, 10);
<span id="line306"></span>jg.drawRect(40, 45, 10, 10);
<span id="line307"></span>jg.drawRect(50, 45, 10, 10);
<span id="line308"></span>jg.drawRect(60, 45, 10, 10);
<span id="line309"></span>jg.drawRect(60, 55, 10, 10);
<span id="line310"></span>jg.drawRect(60, 65, 10, 10);
<span id="line311"></span>jg.drawRect(70, 65, 10, 10);
<span id="line312"></span>jg.drawRect(70, 75, 10, 10);
<span id="line313"></span>jg.drawRect(70, 85, 10, 10);
<span id="line314"></span>jg.drawRect(80, 85, 10, 10);
<span id="line315"></span>jg.drawRect(80, 95, 10, 10);
<span id="line316"></span>jg.drawRect(80, 105, 10, 10);
<span id="line317"></span>
<span id="line318"></span>jg.setColor("#008800");
<span id="line319"></span>jg.drawString("bad", 130, 129);
<span id="line320"></span>drwPxOv(jg, 30, 25, 16, 16, 10, "#006600", "#cceecc", true);
<span id="line321"></span>
<span id="line322"></span>jg.setColor("#0000cc");
<span id="line323"></span>jg.drawString("optimal</span><span><b</span><span>r>wz_jsgraphics.js", 240, 119);
<span id="line324"></span>drwPxOv(jg, 150, 25, 16, 16, 10, "#000099", "#ccccff");
<span id="line325"></span>
<span id="line326"></span>jg.htm += '</span><span><\</span><span>/div></span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table>';
<span id="line327"></span>
<span id="line328"></span>jg.paint();
<span id="line329"></span>//-->
<span id="line330"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line331"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line332"></span> To minimize the amount of such overhead and to optimize performance to what's possible, this Draw Shapes JavaScript VectorGraphics Library, besides using fast algorithms (based on Bresenham algorithms) to compute the shapes, minimizes the number of generated DIVs by combining as many pixels into each DIV as possible.
<span id="line333"></span> Therefore, as illustrated by the picture on the left, the number of DIV elements is decreased </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#notes">#notes</a>"></span><span>[1]</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span> from one per pixel to one per pixel stair-step.
<span id="line334"></span> For filled shapes, the advantage of the wz_jsgraphics.js approach is even bigger, as illustrated by the varicoloured filled ellipse below these paragraphs - imagine, by comparison, an ellipse composed of 1*1 pixel DIVs...
<span id="line335"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line336"></span> </span><span><<span class="start-tag">b</span>></span><span>However, don't compare the performance with Java or stand-alone applications!</span><span></<span class="end-tag">b</span>></span><span>
<span id="line337"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line338"></span> Making a browser create DIV elements is of course much slower than just colouring pixels<span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#notes">#notes</a>"></span><span>[2]</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>.
<span id="line339"></span> Even this JavaScript Vectorgraphics Library can't escape from this fundamental restriction - it just tries to squeeze out the maximum of what's possible.
<span id="line340"></span> It's recommended to refrain from creating shapes that extend more than 600 - 1000 pixels in both dimensions.
<span id="line341"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line342"></span> </span><span><<span class="start-tag">b</span>></span><span>Alternative to SVG or <span class="entity"><span>&</span>lt;</span>canvas<span class="entity"><span>&</span>gt;</span> tag?</span><span></<span class="end-tag">b</span>></span><span>
<span id="line343"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line344"></span> Both techniques are presently not natively supported by IE.
<span id="line345"></span> IE's proprietary VML, on the other hand, is not supported by the other browsers.
<span id="line346"></span> Therefore you might use this Vector Graphics Library as an non-proprietary alternative for small or not-too-complex graphic elements, presumably running on the machines of more than 95% of all internet visitors.
<span id="line347"></span> Moreover, as this vectorgraphics library allows graphics to overflow the borders of their <span class="entity"><span>&</span>quot;</span>canvases<span class="entity"><span>&</span>quot;</span>, it can render to almost anywhere on a page.
<span id="line348"></span> </span><span><<span class="start-tag">br</span> <span class="attribute-name">clear</span>="<a class="attribute-value">all</a>"></span><span>
<span id="line349"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/jsgraphics/filloval.gif">../images/jsgraphics/filloval.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100</a>" <span class="attribute-name">height</span>="<a class="attribute-value">148</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">JavaScript Vector Graphics Library: fillEllipse()</a>"></span><span>
<span id="line350"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line351"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line352"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line353"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line354"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">browser</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Cross Browser Functionality?</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line355"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line356"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line357"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line358"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line359"></span> Linux:
<span id="line360"></span> </span><span><<span class="start-tag">br</span>></span><span>Browsers with Gecko-Engine (Mozilla, Netscape<span class="entity"><span>&</span>nbsp;</span>6+, Galeon), Konqueror, Opera<span class="entity"><span>&</span>nbsp;</span>5, 6 and 7+.
<span id="line361"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line362"></span> Windows:
<span id="line363"></span> </span><span><<span class="start-tag">br</span>></span><span>Gecko-Browsers, IE 4, 5 and 6, Opera<span class="entity"><span>&</span>nbsp;</span>5, 6 and 7+.
<span id="line364"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line365"></span> Mac:
<span id="line366"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line367"></span> Safari, Gecko-Browsers, Opera, partially IE.
<span id="line368"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line369"></span> The functionality <span class="entity"><span>&</span>quot;</span>Draw into html elements even after the page has fully loaded<span class="entity"><span>&</span>quot;</span> isn't available for Opera<span class="entity"><span>&</span>nbsp;</span>prior to version<span class="entity"><span>&</span>nbsp;</span>7,
<span id="line370"></span> whereas <span class="entity"><span>&</span>quot;</span>Draw into the document while the page is parsed<span class="entity"><span>&</span>quot;</span> is cross-browser capable.
<span id="line371"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line372"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line373"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line374"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line375"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">docu</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Documentation: How to Use the JavaScript Graphics Library</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line376"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line377"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line378"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line379"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line380"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line381"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>1.</span><span></<span class="end-tag">big</span>></span><span> Download the Library</span><span></<span class="end-tag">b</span>></span><span>
<span id="line382"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line383"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#download">#download</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span> the JavaScript Vector Graphics Library.
<span id="line384"></span> </span><span><<span class="start-tag">strong</span>></span><span>Note: Please use the downloaded file only</span><span></<span class="end-tag">strong</span>></span><span>, do not directly link wz_jsgraphics.js from my site into your site.
<span id="line385"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line386"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line387"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line388"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line389"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>2.</span><span></<span class="end-tag">big</span>></span><span> Include the Library</span><span></<span class="end-tag">b</span>></span><span>
<span id="line390"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line391"></span> Un-zipp the file into the same directory as your html file.
<span id="line392"></span> Insert the following code into the head-section of the html file, between <span class="entity"><span>&</span>lt;</span>head<span class="entity"><span>&</span>gt;</span> and <span class="entity"><span>&</span>lt;</span>/head<span class="entity"><span>&</span>gt;</span> -
<span id="line393"></span> if you'd like to have the library in a different directory, adapt the path src=<span class="entity"><span>&</span>quot;</span>wz_jsgraphics.js<span class="entity"><span>&</span>quot;</span>:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line394"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line395"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line396"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line397"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line398"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line399"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line400"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line401"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line402"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">1</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line403"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line404"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line405"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>
<span id="line406"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span> src=<span class="entity"><span>&</span>quot;</span>wz_jsgraphics.js<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line407"></span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line408"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line409"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line410"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line411"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line412"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line413"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line414"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line415"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line416"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line417"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line418"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line419"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>3.</span><span></<span class="end-tag">big</span>></span><span> HTML: <span class="entity"><span>&</span>lt;</span>div<span class="entity"><span>&</span>gt;</span> Elements As Canvases</span><span></<span class="end-tag">b</span>></span><span>
<span id="line420"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line421"></span> This step isn't required for the mode <span class="entity"><span>&</span>quot;</span>Draw directly into the document while the page is parsed<span class="entity"><span>&</span>quot;</span>.
<span id="line422"></span> To draw into DIV elements even after the page has fully loaded, however, relatively as well as absolutely positioned layers (DIV elements) are appropriate to serve as canvases.
<span id="line423"></span> Each of these layers must have a unique ID:
<span id="line424"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line425"></span> <span class="entity"><span>&</span>lt;</span>div id=<span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span> style=<span class="entity"><span>&</span>quot;</span>position:relative;height:250px;width:100%;<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span><span class="entity"><span>&</span>lt;</span>/div<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line426"></span> ...</span><span><<span class="start-tag">br</span>></span><span>
<span id="line427"></span> <span class="entity"><span>&</span>lt;</span>div id=<span class="entity"><span>&</span>quot;</span>anotherCanvas<span class="entity"><span>&</span>quot;</span> style=<span class="entity"><span>&</span>quot;</span>position:relative;height:100px;width:300px;<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span><span class="entity"><span>&</span>lt;</span>/div<span class="entity"><span>&</span>gt;</span>
<span id="line428"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line429"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line430"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line431"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line432"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line433"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>How to Draw Shapes</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line434"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line435"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">4</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line436"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line437"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line438"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML, JavaScript: Draw Ellipses, Ovals, Circles, Polygons, Triangles, Rectangles, Lines, Polylines</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line439"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line440"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line441"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line442"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#top">#top</a>"></span><span>Top of Page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line443"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line444"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>Performance?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line445"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line446"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#browser">#browser</a>"></span><span>Cross Browser?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line447"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line448"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#docu">#docu</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line449"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line450"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#download">#download</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line451"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line452"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line453"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line454"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line455"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line456"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line457"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line458"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line459"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line460"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>1.</span><span></<span class="end-tag">big</span>></span><span> Create a jsGraphics Object</span><span></<span class="end-tag">b</span>></span><span>
<span id="line461"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line462"></span> </span><span><<span class="start-tag">b</span>></span><span>a) Draw into DIV elements even after the page has fully loaded:</span><span></<span class="end-tag">b</span>></span><span>
<span id="line463"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line464"></span> (This mode doesn't work in Opera 5 and 6.)
<span id="line465"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line466"></span> See the example below for how to create a jsGraphics object for a certain DIV element intended to serve as canvas.
<span id="line467"></span> This code should be inserted into the html code past the concerned DIV element, but in any case ahead of the closing body tag.
<span id="line468"></span> The constructor function </span><span><<span class="start-tag">tt</span>></span><span>new<span class="entity"><span>&</span>nbsp;</span>jsGraphics()</span><span></<span class="end-tag">tt</span>></span><span> requires as parameter either the ID of the canvas DIV in quotation marks, or a direct reference to the DIV:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line469"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line470"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line471"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line472"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line473"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line474"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line475"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line476"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">1</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line477"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line478"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line479"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>
<span id="line480"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line481"></span><span class="entity"><span>&</span>lt;</span>!--</span><span><<span class="start-tag">br</span>></span><span>
<span id="line482"></span>var jg = new jsGraphics(<span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line483"></span>//--<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line484"></span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line485"></span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line486"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line487"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line488"></span></span><span><<span class="start-tag">b</span>></span><span>or</span><span></<span class="end-tag">b</span>></span><span>
<span id="line489"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line490"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line491"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>
<span id="line492"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line493"></span><span class="entity"><span>&</span>lt;</span>!--</span><span><<span class="start-tag">br</span>></span><span>
<span id="line494"></span>var cnv = document.getElementById(<span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line495"></span>var jg = new jsGraphics(cnv);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line496"></span>//--<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line497"></span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line498"></span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line499"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line500"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line501"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line502"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line503"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line504"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line505"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line506"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line507"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line508"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line509"></span> If there are multiple separate DIV elements, each requires its own jsGraphics instance:
<span id="line510"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line511"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line512"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line513"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line514"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line515"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line516"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line517"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">1</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line518"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line519"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line520"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>
<span id="line521"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line522"></span><span class="entity"><span>&</span>lt;</span>!--</span><span><<span class="start-tag">br</span>></span><span>
<span id="line523"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line524"></span>var jg = new jsGraphics(<span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line525"></span>var jg2 = new jsGraphics(<span class="entity"><span>&</span>quot;</span>anotherCanvas<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line526"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line527"></span>//--<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line528"></span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line529"></span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line530"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line531"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line532"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line533"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line534"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line535"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line536"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line537"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line538"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line539"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line540"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line541"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line542"></span> </span><span><<span class="start-tag">b</span>></span><span>b) Draw directly into the document while the page is parsed:</span><span></<span class="end-tag">b</span>></span><span>
<span id="line543"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line544"></span> Works even in Opera 5/6.
<span id="line545"></span> Instead of the ID of a DIV element, nothing (or the value null) must be passed to the constructor function:
<span id="line546"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line547"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line548"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line549"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line550"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line551"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line552"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line553"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line554"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">1</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line555"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line556"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line557"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>
<span id="line558"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line559"></span><span class="entity"><span>&</span>lt;</span>!--</span><span><<span class="start-tag">br</span>></span><span>
<span id="line560"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line561"></span>var jg_doc = new jsGraphics();</span><span><<span class="start-tag">br</span>></span><span>
<span id="line562"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line563"></span>//--<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line564"></span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line565"></span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line566"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line567"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line568"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line569"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line570"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line571"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line572"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line573"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line574"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line575"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line576"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line577"></span> Instead of jg, jg2 or jg_doc you may choose any other variable name, provided it follows the rules for variable names in JavaScript.
<span id="line578"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line579"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line580"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line581"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line582"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line583"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>2.</span><span></<span class="end-tag">big</span>></span><span> Functions to Draw Shapes</span><span></<span class="end-tag">b</span>></span><span>
<span id="line584"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line585"></span> Once generated, these graphics objects (in this expample jg, jg2 and/or jg_doc) can be used to call the Draw Shapes methods.
<span id="line586"></span> The shapes generated by a certain graphics object will be drawn into the concerned html element, or, with mode b) used, into the document itself:
<span id="line587"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line588"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line589"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line590"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line591"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line592"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line593"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line594"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line595"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">1</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line596"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line597"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line598"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>
<span id="line599"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line600"></span><span class="entity"><span>&</span>lt;</span>!--</span><span><<span class="start-tag">br</span>></span><span>
<span id="line601"></span>function myDrawFunction()</span><span><<span class="start-tag">br</span>></span><span>
<span id="line602"></span>{</span><span><<span class="start-tag">br</span>></span><span>
<span id="line603"></span><span class="entity"><span>&</span>nbsp;</span> jg_doc.setColor(<span class="entity"><span>&</span>quot;</span>#00ff00<span class="entity"><span>&</span>quot;</span>); </span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>// green</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line604"></span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span>jg_doc.fillEllipse(100,<span class="entity"><span>&</span>nbsp;</span>200,<span class="entity"><span>&</span>nbsp;</span>100,<span class="entity"><span>&</span>nbsp;</span>180);<span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>//<span class="entity"><span>&</span>nbsp;</span>co-ordinates<span class="entity"><span>&</span>nbsp;</span>related<span class="entity"><span>&</span>nbsp;</span>to<span class="entity"><span>&</span>nbsp;</span>the<span class="entity"><span>&</span>nbsp;</span>document</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line605"></span><span class="entity"><span>&</span>nbsp;</span> jg_doc.setColor(<span class="entity"><span>&</span>quot;</span>maroon<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line606"></span><span class="entity"><span>&</span>nbsp;</span> jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));</span><span><<span class="start-tag">br</span>></span><span>
<span id="line607"></span><span class="entity"><span>&</span>nbsp;</span> jg_doc.paint(); </span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>// draws, in this case, directly into the document</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line608"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line609"></span><span class="entity"><span>&</span>nbsp;</span> jg.setColor(<span class="entity"><span>&</span>quot;</span>#ff0000<span class="entity"><span>&</span>quot;</span>); </span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>// red</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line610"></span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span>jg.drawLine(10,<span class="entity"><span>&</span>nbsp;</span>113,<span class="entity"><span>&</span>nbsp;</span>220,<span class="entity"><span>&</span>nbsp;</span>55);<span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>//<span class="entity"><span>&</span>nbsp;</span>co-ordinates<span class="entity"><span>&</span>nbsp;</span>related<span class="entity"><span>&</span>nbsp;</span>to<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line611"></span><span class="entity"><span>&</span>nbsp;</span> jg.setColor(<span class="entity"><span>&</span>quot;</span>#0000ff<span class="entity"><span>&</span>quot;</span>); </span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>// blue</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line612"></span><span class="entity"><span>&</span>nbsp;</span> jg.fillRect(110, 120, 30, 60);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line613"></span><span class="entity"><span>&</span>nbsp;</span> jg.paint();</span><span><<span class="start-tag">br</span>></span><span>
<span id="line614"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line615"></span><span class="entity"><span>&</span>nbsp;</span> jg2.setColor(<span class="entity"><span>&</span>quot;</span>#0000ff<span class="entity"><span>&</span>quot;</span>); </span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>// blue</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line616"></span><span class="entity"><span>&</span>nbsp;</span> jg2.drawEllipse(10, 50, 30, 100);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line617"></span><span class="entity"><span>&</span>nbsp;</span> jg2.drawRect(400, 10, 100, 50);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line618"></span><span class="entity"><span>&</span>nbsp;</span> jg2.paint();</span><span><<span class="start-tag">br</span>></span><span>
<span id="line619"></span>}</span><span><<span class="start-tag">br</span>></span><span>
<span id="line620"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line621"></span>var jg_doc<span class="entity"><span>&</span>nbsp;</span>=<span class="entity"><span>&</span>nbsp;</span>new<span class="entity"><span>&</span>nbsp;</span>jsGraphics();<span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">i</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span>//<span class="entity"><span>&</span>nbsp;</span>draw<span class="entity"><span>&</span>nbsp;</span>directly<span class="entity"><span>&</span>nbsp;</span>into<span class="entity"><span>&</span>nbsp;</span>document</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line622"></span>var jg = new jsGraphics(<span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line623"></span>var jg2 = new jsGraphics(<span class="entity"><span>&</span>quot;</span>anotherCanvas<span class="entity"><span>&</span>quot;</span>);</span><span><<span class="start-tag">br</span>></span><span>
<span id="line624"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line625"></span>myDrawFunction();</span><span><<span class="start-tag">br</span>></span><span>
<span id="line626"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line627"></span>//--<span class="entity"><span>&</span>gt;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line628"></span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line629"></span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line630"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line631"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line632"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line633"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line634"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line635"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line636"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line637"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line638"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line639"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line640"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line641"></span> As illustrated in this example, at first the color of the <span class="entity"><span>&</span>quot;</span>pen<span class="entity"><span>&</span>quot;</span> should be set. Otherwise the default color black will be used.
<span id="line642"></span> The coordinates passed to the Draw Shapes methods refer either, if mode b) used, to the left-top corner of the document itself, or to the left-top corner of the concerned DIV.
<span id="line643"></span> For each canvas (graphics object) separately, its paint() method must be called explicitly to render the internally-generated graphics html.
<span id="line644"></span> Otherwise nothing will happen on your screen.
<span id="line645"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line646"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line647"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line648"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line649"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line650"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line651"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line652"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>" <span class="attribute-name">style</span>="<a class="attribute-value">margin:10px;</a>"></span><span>
<span id="line653"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line654"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line655"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">8</a>"></span><span>
<span id="line656"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line657"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Name of function (method)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line658"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Code example</span><span></<span class="end-tag">b</span>></span><span> as to be used with the above example object 'jg' (which is the context of the DIV called <span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span>)</span><span></<span class="end-tag">td</span>></span><span>
<span id="line659"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line660"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>"></span><span>
<span id="line661"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>"></span><span>
<span id="line662"></span> </span><span><<span class="start-tag">b</span>></span><span>General Notes</span><span></<span class="end-tag">b</span>></span><span>
<span id="line663"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line664"></span> </span><span><<span class="start-tag">b</span>></span><span>1.)</span><span></<span class="end-tag">b</span>></span><span> Numbers passed to these functions must always be </span><span><<span class="start-tag">b</span>></span><span>integer numbers</span><span></<span class="end-tag">b</span>></span><span>, rather than decimal point numbers (floating point numbers), characters or strings.
<span id="line665"></span> For instance, values obtained from formular inputs are always strings, and results from previous JavaScript calculations typically floating point numbers.
<span id="line666"></span> Use the predefined </span><span><<span class="start-tag">tt</span>></span><span>parseInt()</span><span></<span class="end-tag">tt</span>></span><span> or </span><span><<span class="start-tag">tt</span>></span><span>Math.round()</span><span></<span class="end-tag">tt</span>></span><span> JavaScript functions to convert such values to integers.
<span id="line667"></span> Example:
<span id="line668"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line669"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.setStroke(parseInt(document.MyForm.Linewidth.value));</span><span></<span class="end-tag">code</span>></span><span>
<span id="line670"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line671"></span> </span><span><<span class="start-tag">b</span>></span><span>2.)</span><span></<span class="end-tag">b</span>></span><span> Consider that co-ordinates lie between pixels, not on them,
<span id="line672"></span> and that the drawing <span class="entity"><span>&</span>quot;</span>pen<span class="entity"><span>&</span>quot;</span> hangs beneath and to the right of the path specified by co-ordinates passed to the functions.
<span id="line673"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line674"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line675"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line676"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line677"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setColor(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>#HexColor<span class="entity"><span>&</span>quot;</span></span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line678"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line679"></span> Specifies the color of the drawing <span class="entity"><span>&</span>quot;</span>pen<span class="entity"><span>&</span>quot;</span>.
<span id="line680"></span> Once set, this color will be used by the subsequently called drawing methods until it will be overridden through another call of setColor().
<span id="line681"></span> The value must be enclosed in quotation marks, and should be hexadecimal following the pattern <span class="entity"><span>&</span>quot;</span>#rrggbb<span class="entity"><span>&</span>quot;</span> (as usual with HTML).
<span id="line682"></span> Color names available in HTML (for instance <span class="entity"><span>&</span>quot;</span>maroon<span class="entity"><span>&</span>quot;</span>) may be used as well.
<span id="line683"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line684"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.setColor(<span class="entity"><span>&</span>quot;</span>#ff0000<span class="entity"><span>&</span>quot;</span>);</span><span></<span class="end-tag">code</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>or with identical result</span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.setColor(<span class="entity"><span>&</span>quot;</span>red<span class="entity"><span>&</span>quot;</span>);</span><span></<span class="end-tag">code</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line685"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line686"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line687"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line688"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setStroke(</span><span></<span class="end-tag">b</span>></span><span>Number</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line689"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line690"></span> Specifies the thickness of the drawing <span class="entity"><span>&</span>quot;</span>pen<span class="entity"><span>&</span>quot;</span> for lines and bounding lines of shapes.
<span id="line691"></span> Once set, this thickness will be used by the subsequently called drawing methods until it will be overridden through another call of setStroke().
<span id="line692"></span> Default line thickness is 1<span class="entity"><span>&</span>nbsp;</span>px, as long as .setStroke() has not yet been invoked.
<span id="line693"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line694"></span> To create dotted lines, </span><span><<span class="start-tag">tt</span>></span><span>setStroke()</span><span></<span class="end-tag">tt</span>></span><span> requires the constant </span><span><<span class="start-tag">tt</span>></span><span>Stroke.DOTTED</span><span></<span class="end-tag">tt</span>></span><span> as argument.
<span id="line695"></span> Width of dotted lines is always 1 pixel.
<span id="line696"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line697"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line698"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.setStroke(3);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line699"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line700"></span> or
<span id="line701"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line702"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.setStroke(Stroke.DOTTED);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line703"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line704"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line705"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line706"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line707"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawLine(</span><span></<span class="end-tag">b</span>></span><span>X1, Y1, X2, Y2</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line708"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line709"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line710"></span></span><span><!</span><span>--
<span id="line711"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line712"></span>
<span id="line713"></span>jg.setStroke(2);
<span id="line714"></span>jg.setColor("#ff6666");
<span id="line715"></span>jg.drawLine(0, 11, 40, 0);
<span id="line716"></span>
<span id="line717"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line718"></span>jg.paint();
<span id="line719"></span>//-->
<span id="line720"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line721"></span> Line from the first to the second pair of coordinates.
<span id="line722"></span> Line thickness is either 1<span class="entity"><span>&</span>nbsp;</span>px or the value most recently specified by </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span>.setStroke()</span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>.
<span id="line723"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line724"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.drawLine(20,50,453,40);</span><span></<span class="end-tag">code</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line725"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line726"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line727"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line728"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawPolyline(</span><span></<span class="end-tag">b</span>></span><span>Xpoints, Ypoints</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line729"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line730"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line731"></span></span><span><!</span><span>--
<span id="line732"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line733"></span>
<span id="line734"></span>jg.setColor("#55aaaa");
<span id="line735"></span>jg.drawPolyLine(new Array(0, 10, 20, 30, 40), new Array(0, 11, 0, 11, 0));
<span id="line736"></span>
<span id="line737"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line738"></span>jg.paint();
<span id="line739"></span>//-->
<span id="line740"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line741"></span> A polyline is a series of connected line segments.
<span id="line742"></span> Xpoints and Ypoints are arrays which specify the x and y coordinates of each point as follows:
<span id="line743"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line744"></span> </span><span><<span class="start-tag">code</span>></span><span>var Xpoints = new Array(x1,x2,x3,x4,x5);</span><span><<span class="start-tag">br</span>></span><span>var YPoints = new Array(y1,y2,y3,y4,y5);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line745"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line746"></span> Instead of Xpoints and Ypoints you may of course use other names provided these follow the rules for JavaScript variable names.
<span id="line747"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line748"></span> Line thickness is either 1px or the value most recently specified by </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span>.setStroke()</span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>.
<span id="line749"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line750"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>var Xpoints = new Array(10,85,93,60);</span><span><<span class="start-tag">br</span>></span><span>var YPoints = new Array(50,10,105,87);</span><span><<span class="start-tag">br</span>></span><span>jg.drawPolyline(Xpoints,Ypoints);</span><span></<span class="end-tag">code</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line751"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line752"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line753"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line754"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawRect(</span><span></<span class="end-tag">b</span>></span><span>X,<span class="entity"><span>&</span>nbsp;</span>Y,<span class="entity"><span>&</span>nbsp;</span>width,<span class="entity"><span>&</span>nbsp;</span>height</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line755"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line756"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line757"></span></span><span><!</span><span>--
<span id="line758"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line759"></span>
<span id="line760"></span>jg.setColor("#6666ff");
<span id="line761"></span>jg.drawRect(0, 0, 40, 11);
<span id="line762"></span>
<span id="line763"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line764"></span>jg.paint();
<span id="line765"></span>//-->
<span id="line766"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line767"></span> Outline of a rectangle. X and Y give the co-ordinates of the left top corner.
<span id="line768"></span> Line thickness is either 1px or the value most recently specified by </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span>.setStroke()</span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>.
<span id="line769"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line770"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.drawRect(20,50,70,140);</span><span></<span class="end-tag">code</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line771"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line772"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line773"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line774"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>fillRect(</span><span></<span class="end-tag">b</span>></span><span>X,<span class="entity"><span>&</span>nbsp;</span>Y,<span class="entity"><span>&</span>nbsp;</span>width,<span class="entity"><span>&</span>nbsp;</span>height</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line775"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line776"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line777"></span></span><span><!</span><span>--
<span id="line778"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line779"></span>
<span id="line780"></span>jg.setColor("#ffcc66");
<span id="line781"></span>jg.fillRect(0, 0, 40, 11);
<span id="line782"></span>
<span id="line783"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line784"></span>jg.paint();
<span id="line785"></span>//-->
<span id="line786"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line787"></span> Filled rectangle. X and Y give the co-ordinates to the left top corner.
<span id="line788"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line789"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.fillRect(20,50,453,40);</span><span></<span class="end-tag">code</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line790"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line791"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line792"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line793"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawPolygon(</span><span></<span class="end-tag">b</span>></span><span>Xpoints, Ypoints</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line794"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line795"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line796"></span></span><span><!</span><span>--
<span id="line797"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line798"></span>
<span id="line799"></span>jg.setColor("#cc66cc");
<span id="line800"></span>jg.drawPolygon(new Array(0, 20, 40, 20), new Array(5, 0, 5, 11));
<span id="line801"></span>
<span id="line802"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line803"></span>jg.paint();
<span id="line804"></span>//-->
<span id="line805"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line806"></span> Polygon.
<span id="line807"></span> Xpoints and Ypoints are arrays which specify the x and y coordinates of the polygon's corners as follows:
<span id="line808"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line809"></span> </span><span><<span class="start-tag">code</span>></span><span>var Xpoints = new Array(x1,x2,x3,x4,x5);</span><span><<span class="start-tag">br</span>></span><span>var Ypoints = new Array(y1,y2,y3,y4,y5);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line810"></span> </span><span><<span class="start-tag">br</span>></span><span>The polygon will be automatically closed if the first and last points are not identical.
<span id="line811"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line812"></span> Line thickness is either 1px or the value most recently specified by </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span>.setStroke()</span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>.
<span id="line813"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line814"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line815"></span> </span><span><<span class="start-tag">code</span>></span><span>var Xpoints = new Array(10,85,93,60);</span><span><<span class="start-tag">br</span>></span><span>var Ypoints = new Array(50,10,105,87);</span><span><<span class="start-tag">br</span>></span><span>jg.drawPolygon(Xpoints, Ypoints);</span><span></<span class="end-tag">code</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line816"></span> Instead of Xpoints and Ypoints you may of course use other names provided these follow the rules for variable names.
<span id="line817"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line818"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line819"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line820"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line821"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>fillPolygon(</span><span></<span class="end-tag">b</span>></span><span>Xpoints, Ypoints</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line822"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line823"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line824"></span></span><span><!</span><span>--
<span id="line825"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line826"></span>
<span id="line827"></span>jg.setColor("#99ccff");
<span id="line828"></span>jg.fillPolygon(new Array(0, 20, 40, 20), new Array(6, -1, 6, 13));
<span id="line829"></span>
<span id="line830"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line831"></span>jg.paint();
<span id="line832"></span>//-->
<span id="line833"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line834"></span> Filled Polygon.
<span id="line835"></span> Parameters as for drawPolygon()
<span id="line836"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line837"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line838"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.fillPolygon(new Array(10,85,93,60),</span><span></<span class="end-tag">code</span>></span><span> </span><span><<span class="start-tag">code</span>></span><span>new Array(50,10,105,87));</span><span></<span class="end-tag">code</span>></span><span>
<span id="line839"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line840"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line841"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line842"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line843"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawEllipse(</span><span></<span class="end-tag">b</span>></span><span>X,<span class="entity"><span>&</span>nbsp;</span>Y,<span class="entity"><span>&</span>nbsp;</span>width,<span class="entity"><span>&</span>nbsp;</span>height</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line844"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line845"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line846"></span></span><span><!</span><span>--
<span id="line847"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line848"></span>
<span id="line849"></span>jg.setColor("#55bb55");
<span id="line850"></span>jg.drawOval(0, -1, 40, 12);
<span id="line851"></span>
<span id="line852"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line853"></span>jg.paint();
<span id="line854"></span>//-->
<span id="line855"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line856"></span> Outline of an ellipse.
<span id="line857"></span> Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left top corner of that rectangle rather than of its center.
<span id="line858"></span> Line thickness is either 1px or the value most recently specified by </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span>.setStroke()</span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>.
<span id="line859"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line860"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line861"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.drawEllipse(20,50,70,140);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line862"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line863"></span> or
<span id="line864"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line865"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.drawOval(20,50,70,140);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line866"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line867"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line868"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line869"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line870"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>fillEllipse(</span><span></<span class="end-tag">b</span>></span><span>X,<span class="entity"><span>&</span>nbsp;</span>Y,<span class="entity"><span>&</span>nbsp;</span>width,<span class="entity"><span>&</span>nbsp;</span>height</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line871"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line872"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line873"></span></span><span><!</span><span>--
<span id="line874"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line875"></span>
<span id="line876"></span>jg.setColor("#ffccdd");
<span id="line877"></span>jg.fillOval(0, -1, 41, 13);
<span id="line878"></span>
<span id="line879"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line880"></span>jg.paint();
<span id="line881"></span>//-->
<span id="line882"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line883"></span> Filled ellipse.
<span id="line884"></span> Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left-top corner of that rectangle rather than of its center.
<span id="line885"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line886"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line887"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.fillEllipse(20,50,71,141);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line888"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line889"></span> or
<span id="line890"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line891"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.fillOval(20,50,71,141);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line892"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line893"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line894"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line895"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line896"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>fillArc(</span><span></<span class="end-tag">b</span>></span><span>X,<span class="entity"><span>&</span>nbsp;</span>Y,<span class="entity"><span>&</span>nbsp;</span>width,<span class="entity"><span>&</span>nbsp;</span>height,<span class="entity"><span>&</span>nbsp;</span>start-angle,<span class="entity"><span>&</span>nbsp;</span>end-angle</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line897"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line898"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line899"></span></span><span><!</span><span>--
<span id="line900"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:50px;height:13px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line901"></span>
<span id="line902"></span>jg.setColor("#ffbb00");
<span id="line903"></span>jg.fillArc(0, -1, 41, 13, 270, 220);
<span id="line904"></span>
<span id="line905"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line906"></span>jg.paint();
<span id="line907"></span>//-->
<span id="line908"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line909"></span> Fills a pie section of an ellipse.
<span id="line910"></span> Start-angle and end-angle may be integer numbers or decimalpoint values.
<span id="line911"></span> Like with the other ...Ellipse() functions, X and Y specify the left-top corner of the bounding rectangle.
<span id="line912"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line913"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line914"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.fillArc(20,20,41,12,270.0,220.0);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line915"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line916"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line917"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line918"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line919"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setFont(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>font-family<span class="entity"><span>&</span>quot;</span>, <span class="entity"><span>&</span>quot;</span>size+unit<span class="entity"><span>&</span>quot;</span>, Style</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line920"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line921"></span> This method can be invoked prior to drawString() to specify or change font-family, -size and -style.
<span id="line922"></span> Values or font-family and -size may be whatever possible in HTML, and must be enclosed in quotation marks.
<span id="line923"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line924"></span> Available font styles:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line925"></span> Font.PLAIN for normal style (not bold, not italic)</span><span><<span class="start-tag">br</span>></span><span>
<span id="line926"></span> Font.BOLD for bold fonts</span><span><<span class="start-tag">br</span>></span><span>
<span id="line927"></span> Font.ITALIC for italics</span><span><<span class="start-tag">br</span>></span><span>
<span id="line928"></span> Font.ITALIC_BOLD or Font.BOLD_ITALIC to combine the latters.
<span id="line929"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line930"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line931"></span> Example: see </span><span><<span class="start-tag">code</span>></span><span>drawString()</span><span></<span class="end-tag">code</span>></span><span> below
<span id="line932"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line933"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line934"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line935"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line936"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawString(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>Text<span class="entity"><span>&</span>quot;</span>, X, Y</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line937"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line938"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line939"></span></span><span><!</span><span>--
<span id="line940"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:400px;height:16px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0" width="400"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line941"></span>
<span id="line942"></span>jg.setFont("arial,helvetica,sans-serif", "15px", Font.ITALIC_BOLD);
<span id="line943"></span>jg.setColor("#cc6600");
<span id="line944"></span>jg.drawString("I've been drawn with the Vectorgraphics Library...", 0, 0);
<span id="line945"></span>
<span id="line946"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line947"></span>jg.paint();
<span id="line948"></span>//-->
<span id="line949"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line950"></span> Writes text to the location specified by X and Y.
<span id="line951"></span> Differently from Java, these coordinates refer to the left top corner of the first line of the text.
<span id="line952"></span> The string passed to drawString() must be enclosed in quotation marks.
<span id="line953"></span> (Non-escaped) HTML tags inside the string will be interpreted.
<span id="line954"></span> For example, <span class="entity"><span>&</span>quot;</span>Some<span class="entity"><span>&</span>nbsp;</span>Text<span class="entity"><span>&</span>lt;</span>br<span class="entity"><span>&</span>gt;</span>more<span class="entity"><span>&</span>nbsp;</span>Text<span class="entity"><span>&</span>quot;</span> would indeed create a line break.
<span id="line955"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line956"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line957"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.setFont(<span class="entity"><span>&</span>quot;</span>arial<span class="entity"><span>&</span>quot;</span>,<span class="entity"><span>&</span>quot;</span>15px<span class="entity"><span>&</span>quot;</span>,Font.ITALIC_BOLD);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line958"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line959"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.drawString(<span class="entity"><span>&</span>quot;</span>Some<span class="entity"><span>&</span>nbsp;</span>Text<span class="entity"><span>&</span>quot;</span>,20,50);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line960"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line961"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line962"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line963"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line964"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawStringRect(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>Text<span class="entity"><span>&</span>quot;</span>, X, Y, Width, Alignment</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line965"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line966"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line967"></span></span><span><!</span><span>--
<span id="line968"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:400px;height:100px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0" width="400"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line969"></span>
<span id="line970"></span>jg.setFont("verdana,geneva,sans-serif", "11px", Font.BOLD);
<span id="line971"></span>jg.setColor("#009999");
<span id="line972"></span>jg.drawStringRect("A text drawn by using drawStringRect() which allows to set the width of the text rectangle and to align the text horizontally (in this case &quot;right&quot;)", 4, 4, 292, "right");
<span id="line973"></span>
<span id="line974"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line975"></span>jg.paint();
<span id="line976"></span>//-->
<span id="line977"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line978"></span> Like drawString.
<span id="line979"></span> Allows however to set the width of the text rectangle and to specify the horizontal text-alignment.
<span id="line980"></span> Text-alignment value must be a string (i.e. enclosed in quotation marks or apostrophes) and can be either <span class="entity"><span>&</span>quot;</span>left<span class="entity"><span>&</span>quot;</span>, <span class="entity"><span>&</span>quot;</span>center<span class="entity"><span>&</span>quot;</span>, <span class="entity"><span>&</span>quot;</span>right<span class="entity"><span>&</span>quot;</span> or <span class="entity"><span>&</span>quot;</span>justify<span class="entity"><span>&</span>quot;</span>.
<span id="line981"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line982"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line983"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.setFont(<span class="entity"><span>&</span>quot;</span>verdana<span class="entity"><span>&</span>quot;</span>,<span class="entity"><span>&</span>quot;</span>11px<span class="entity"><span>&</span>quot;</span>,Font.BOLD);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line984"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line985"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.drawStringRect(<span class="entity"><span>&</span>quot;</span>Text<span class="entity"><span>&</span>quot;</span>,20,50,300,<span class="entity"><span>&</span>quot;</span>right<span class="entity"><span>&</span>quot;</span>);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line986"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line987"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line988"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line989"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line990"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>drawImage(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>src<span class="entity"><span>&</span>quot;</span>, X, Y, width, height</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line991"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line992"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line993"></span></span><span><!</span><span>--
<span id="line994"></span>jg.htm += '</span><span><d</span><span>iv style="position:relative;width:400px;height:64px;"></span><span><t</span><span>able cellpadding="0" cellspacing="0" width="400"></span><span><t</span><span>r></span><span><t</span><span>d>';
<span id="line995"></span>
<span id="line996"></span>jg.drawImage("../images/dragdrop/deddie.jpg", 0, 0, 90, 62);
<span id="line997"></span>
<span id="line998"></span>jg.htm += '</span><span><\</span><span>/td></span><span><\</span><span>/tr></span><span><\</span><span>/table></span><span><\</span><span>/div>';
<span id="line999"></span>jg.paint();
<span id="line1000"></span>//-->
<span id="line1001"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line1002"></span> Draws image at the specified location.
<span id="line1003"></span> The <span class="entity"><span>&</span>quot;</span>src<span class="entity"><span>&</span>quot;</span> parameter specifies the file path.
<span id="line1004"></span> The width and height parameters are optional (may be 0, null or omitted, in which case the image is displayed in its default size),
<span id="line1005"></span> but provide the option to stretch the image (almost) arbitrarily.
<span id="line1006"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1007"></span> Optionally, drawImage() accepts a fifth parameter which you can use to insert an eventhandler into the generated image tag.
<span id="line1008"></span> Example:
<span id="line1009"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1010"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.drawImage('anImg.jpg',8,5,95,70,'onmouseover=<span class="entity"><span>&</span>quot;</span>YourFunc()<span class="entity"><span>&</span>quot;</span>');</span><span></<span class="end-tag">code</span>></span><span>
<span id="line1011"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1012"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1013"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1014"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.drawImage(<span class="entity"><span>&</span>quot;</span>friendlyDog.jpg<span class="entity"><span>&</span>quot;</span>,</span><span></<span class="end-tag">code</span>></span><span> </span><span><<span class="start-tag">code</span>></span><span>20,50,100,150);</span><span></<span class="end-tag">code</span>></span><span>
<span id="line1015"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1016"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1017"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1018"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1019"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>paint();</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line1020"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1021"></span> Must be envoked explicitly to draw the internally-generated graphics into the html page.
<span id="line1022"></span> To optimize performance it's recommended to restrain from calling </span><span><<span class="start-tag">tt</span>></span><span>paint()</span><span></<span class="end-tag">tt</span>></span><span> in unnecessarily short intervals.
<span id="line1023"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>Avoid something like:
<span id="line1024"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1025"></span> </span><span><<span class="start-tag">tt</span>></span><span>jg.drawEllipse(0, 0, 100, 100);
<span id="line1026"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1027"></span> jg.paint();
<span id="line1028"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1029"></span> jg.drawLine(200, 10, 400, 40);
<span id="line1030"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1031"></span> jg.paint();
<span id="line1032"></span> </span><span><<span class="start-tag">br</span>></span><span>...</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1033"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1034"></span> The following will be faster:
<span id="line1035"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1036"></span> </span><span><<span class="start-tag">tt</span>></span><span>jg.drawEllipse(0, 0, 100, 100);
<span id="line1037"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1038"></span> jg.drawLine(200, 10, 400, 40);
<span id="line1039"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1040"></span> /*...further drawing methods... */
<span id="line1041"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1042"></span> jg.paint();</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1043"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1044"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.paint();</span><span></<span class="end-tag">code</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1045"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1046"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1047"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1048"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>clear();</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line1049"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1050"></span> Any content created by the Graphics JavaScript Library will be deleted (within the canvas the graphics object refers to).
<span id="line1051"></span> The default content of the canvas (content not created by the script) will remain untouched, i.e. neither be changed nor be deleted.
<span id="line1052"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1053"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">code</span>></span><span>jg.clear();</span><span></<span class="end-tag">code</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>Any stuff the script has drawn to <span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span> is deleted (assuming that <span class="entity"><span>&</span>quot;</span>myCanvas<span class="entity"><span>&</span>quot;</span> is the DIV for which 'jg' has been created).</span><span></<span class="end-tag">td</span>></span><span>
<span id="line1054"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1055"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">white</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1056"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1057"></span> </span><span><<span class="start-tag">code</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setPrintable(</span><span></<span class="end-tag">b</span>></span><span>true</span><span><<span class="start-tag">b</span>></span><span>);</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">code</span>></span><span>
<span id="line1058"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1059"></span> By default, printing shapes isn't feasible since default printing settings of browsers usually prevent background colors from being printed.
<span id="line1060"></span> Invoking setPrintable() with the parameter true enables wz_jsgraphics.js to draw printable shapes (at least in Mozilla/Netscape<span class="entity"><span>&</span>nbsp;</span>6+ and IE).
<span id="line1061"></span> However, at the price of a slightly decreased rendering speed (about 10% to 25% slower).
<span id="line1062"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1063"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1064"></span> </span><span><<span class="start-tag">code</span>></span><span>jg.setPrintable(false);</span><span></<span class="end-tag">code</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1065"></span> The parameter false switches wz_jsgraphics.js back to non-printable mode.
<span id="line1066"></span> The benefit from this, however, will be re-optimized rendering performance.
<span id="line1067"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1068"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1069"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1070"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1071"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1072"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1073"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line1074"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1075"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">80</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>" <span class="attribute-name">width</span>="<a class="attribute-value">80</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1076"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1077"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>"></span><span>
<span id="line1078"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1079"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1080"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">download</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Download</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line1081"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1082"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">4</a>" <span class="attribute-name">align</span>="<a class="attribute-value">right</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1083"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line1084"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1085"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1086"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1087"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line1088"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1089"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#top">#top</a>"></span><span>Top of Page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1090"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1091"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>Performance?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1092"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1093"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#browser">#browser</a>"></span><span>Cross Browser?</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1094"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1095"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#docu">#docu</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1096"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1097"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#download">#download</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1098"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line1099"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line1100"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1101"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1102"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1103"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1104"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1105"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1106"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1107"></span> wz_jsgraphics.js 3.05, published under the </span><span><<span class="start-tag">b</span>></span><span>LGPL</span><span></<span class="end-tag">b</span>></span><span>:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line1108"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/scripts/wz_jsgraphics.zip">../scripts/wz_jsgraphics.zip</a>"></span><span>wz_jsgraphics.zip</span><span></<span class="end-tag">a</span>></span><span> (7 KB)
<span id="line1109"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/history_e.htm">history_e.htm</a>"></span><span>History of Updates</span><span></<span class="end-tag">a</span>></span><span> (it's recommended to read this, especially if you aren't sure about the benefits from an update :-) ).
<span id="line1110"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1111"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1112"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1113"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1114"></span> </span><span><<span class="start-tag">br</span>></span><span> </span><span><<span class="start-tag">br</span>></span><span> </span><span><<span class="start-tag">br</span>></span><span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1115"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Donation</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line1116"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1117"></span> Financial support for the very numerous hours of development and for the costs of this website is of course welcome.</span><span><<span class="start-tag">br</span>></span><span>
<span id="line1118"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1119"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1120"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1121"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1122"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">notes</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Notes</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line1123"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1124"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1125"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1126"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1127"></span> </span><span><<span class="start-tag">b</span>></span><span>[1]</span><span></<span class="end-tag">b</span>></span><span>
<span id="line1128"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1129"></span> If we assume the probability of line angles on the screen to be equally distributed over 360<span class="entity"><span>&</span>deg;</span>:
<span id="line1130"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1131"></span> Then for 1 px wide lines the number of layers is averagely
<span id="line1132"></span> </span><span><<span class="start-tag">b</span>></span><span>sin(45<span class="entity"><span>&</span>deg;</span>)<span class="entity"><span>&</span>nbsp;</span>/<span class="entity"><span>&</span>nbsp;</span>(1<span class="entity"><span>&</span>nbsp;</span>-<span class="entity"><span>&</span>nbsp;</span>sin(45<span class="entity"><span>&</span>deg;</span>))<span class="entity"><span>&</span>nbsp;</span>=<span class="entity"><span>&</span>nbsp;</span>2.41</span><span></<span class="end-tag">b</span>></span><span>
<span id="line1133"></span> times larger if for each pixel a separate layer is created, compared with a solution that requires merely one layer per pixel stair-step (as is the case with this library).
<span id="line1134"></span> This is true under the assumption that both algorithms let pixel stair-steps touch each other corner-by-corner rather than side-by-side.
<span id="line1135"></span> Otherwise the number of pixels to be colored would be larger, and therefore the disadvantage of an unfavorable one-layer-per-pixel algorithm even bigger.
<span id="line1136"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1137"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>Back</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1138"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1139"></span> </span><span><<span class="start-tag">b</span>></span><span>[2]</span><span></<span class="end-tag">b</span>></span><span>
<span id="line1140"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1141"></span> Something like a really lightweight <span class="entity"><span>&</span>lt;</span>pixel<span class="entity"><span>&</span>nbsp;</span>color=<span class="entity"><span>&</span>quot;</span>#ff9900<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>nbsp;</span>left=<span class="entity"><span>&</span>quot;</span>127<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>nbsp;</span>top=<span class="entity"><span>&</span>quot;</span>63<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span> tag would be nice.
<span id="line1142"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1143"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm#performance">#performance</a>"></span><span>Back</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1144"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1145"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1146"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1147"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1148"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1149"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1150"></span> </span><span><<span class="start-tag">hr</span> <span class="attribute-name">width</span>="<a class="attribute-value">95%</a>" <span class="attribute-name">size</span>="<a class="attribute-value">1</a>" <span class="attribute-name">noshade</span>></span><span>
<span id="line1151"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">20</a>"></span><span>
<span id="line1152"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1153"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1154"></span> </span><span><<span class="start-tag">small</span>></span><span>Walter Zorn, Munich
<span id="line1155"></span> </span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.kreuzotter.de/impressum.htm">http://www.kreuzotter.de/impressum.htm</a>"></span><span>Impressum and about this page</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">small</span>></span><span>
<span id="line1156"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1157"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1158"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1159"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1160"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1161"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line1162"></span></span><span><!</span><span>--
<span id="line1163"></span>var no_dhtm = (document.layers || window.opera && !document.defaultView);
<span id="line1164"></span>
<span id="line1165"></span>
<span id="line1166"></span>
<span id="line1167"></span>function ZOOM()
<span id="line1168"></span>{
<span id="line1169"></span> if (document.body && document.body.style && typeof document.body.style.zoom != "undefined")
<span id="line1170"></span> {
<span id="line1171"></span> if (document.body.style.zoom=="400%")
<span id="line1172"></span> document.body.style.zoom = "100%";
<span id="line1173"></span> else
<span id="line1174"></span> {
<span id="line1175"></span> document.body.style.zoom = "400%";
<span id="line1176"></span> alert('You\'ve doubleclicked on the document.\nDoubleclick again to unzoom.');
<span id="line1177"></span> }
<span id="line1178"></span> }
<span id="line1179"></span>}
<span id="line1180"></span>document.ondblclick=ZOOM;
<span id="line1181"></span>
<span id="line1182"></span>
<span id="line1183"></span>
<span id="line1184"></span>function DRAW(shape)
<span id="line1185"></span>{
<span id="line1186"></span> if (window.event) event.cancelBubble = true;
<span id="line1187"></span> var f=document.forms[0];
<span id="line1188"></span>
<span id="line1189"></span> var color = ''+f.Color.value;
<span id="line1190"></span> for (var z = 0; z</span><span><c</span><span>olor.length; z++)
<span id="line1191"></span> if (isNaN(parseInt(color.charAt(z), 16)))
<span id="line1192"></span> color = color.substring(0, z) + '6' + color.substring(z+1);
<span id="line1193"></span>
<span id="line1194"></span>
<span id="line1195"></span>
<span id="line1196"></span>var t0 = (new Date()).getTime();
<span id="line1197"></span>
<span id="line1198"></span> jg2.setColor("#"+color);
<span id="line1199"></span> jg2.setStroke(f.Dotted.checked? Stroke.DOTTED : parseInt(f.Stroke.value));
<span id="line1200"></span>
<span id="line1201"></span> if (shape=="drawLine()")
<span id="line1202"></span> jg2.drawLine(parseInt(f.dl_x1.value), parseInt(f.dl_y1.value), parseInt(f.dl_x2.value), parseInt(f.dl_y2.value));
<span id="line1203"></span> else if (shape=="drawRect()")
<span id="line1204"></span> jg2.drawRect(parseInt(f.dr_x.value), parseInt(f.dr_y.value), parseInt(f.dr_w.value), parseInt(f.dr_h.value));
<span id="line1205"></span> else if(shape=="fillRect()")
<span id="line1206"></span> jg2.fillRect(parseInt(f.fr_x.value), parseInt(f.fr_y.value), parseInt(f.fr_w.value), parseInt(f.fr_h.value));
<span id="line1207"></span> else if(shape=="drawEllipse()")
<span id="line1208"></span> jg2.drawEllipse(parseInt(f.do_x.value), parseInt(f.do_y.value), parseInt(f.do_w.value), parseInt(f.do_h.value));
<span id="line1209"></span> else if(shape=="fillEllipse()")
<span id="line1210"></span> jg2.fillEllipse(parseInt(f.fo_x.value), parseInt(f.fo_y.value), parseInt(f.fo_w.value), parseInt(f.fo_h.value));
<span id="line1211"></span> else if(shape=="fillArc()")
<span id="line1212"></span> jg2.fillArc(parseInt(f.fa_x.value), parseInt(f.fa_y.value), parseInt(f.fa_w.value), parseInt(f.fa_h.value), parseFloat(f.fa_angA.value.replace(/,/, ".")), parseFloat(f.fa_angZ.value.replace(/,/, ".")));
<span id="line1213"></span> else if(shape=="fillPolygon()")
<span id="line1214"></span> {
<span id="line1215"></span> var pgx = f.fp_x.value.split(',');
<span id="line1216"></span> var pgy = f.fp_y.value.split(',');
<span id="line1217"></span> var comm = '\n \nNote:\nValues must be separated with commas from each other.';
<span id="line1218"></span> if (pgx.length!=pgy.length) alert('The number of x und y values must be equal.'+comm);
<span id="line1219"></span> else
<span id="line1220"></span> {
<span id="line1221"></span> for (var z = 0; z</span><span><p</span><span>gx.length; z++)
<span id="line1222"></span> {
<span id="line1223"></span> if (isNaN(pgx[z] = parseInt(pgx[z])) || isNaN(pgy[z] = parseInt(pgy[z])))
<span id="line1224"></span> {
<span id="line1225"></span> alert('Invalid x or y value.'+comm);
<span id="line1226"></span> return;
<span id="line1227"></span> }
<span id="line1228"></span> }
<span id="line1229"></span> jg2.fillPolygon(pgx, pgy);
<span id="line1230"></span> }
<span id="line1231"></span> }
<span id="line1232"></span>
<span id="line1233"></span> jg2.paint();
<span id="line1234"></span> var t1 = (new Date()).getTime() - t0;
<span id="line1235"></span> jg3.clear();
<span id="line1236"></span> jg3.setColor('#'+color);
<span id="line1237"></span> jg3.setFont('verdana,geneva,sans-serif', '12px', Font.BOLD);
<span id="line1238"></span> jg3.drawString(t1 + ' milliseconds', 0, 10);
<span id="line1239"></span> jg3.paint();
<span id="line1240"></span>}
<span id="line1241"></span>
<span id="line1242"></span>var jg2=new jsGraphics("test");
<span id="line1243"></span>var jg3 = new jsGraphics("dt");
<span id="line1244"></span>
<span id="line1245"></span>
<span id="line1246"></span>
<span id="line1247"></span>function D()
<span id="line1248"></span>{
<span id="line1249"></span> var wc = (window.innerWidth? innerWidth
<span id="line1250"></span> : (document.documentElement && document.documentElement.clientWidth)? document.documentElement.clientWidth
<span id="line1251"></span> : (document.body && document.body.clientWidth)? document.body.clientWidth
<span id="line1252"></span> : document.getElementsByTagName? document.getElementsByTagName('body')[0].offsetWidth
<span id="line1253"></span> : 800) >>1;
<span id="line1254"></span> var dy = no_dhtm? 115 : 0;
<span id="line1255"></span>
<span id="line1256"></span>
<span id="line1257"></span> var jg = new jsGraphics(no_dhtm? null : "main");
<span id="line1258"></span>
<span id="line1259"></span> jg.setColor("#ff9900");
<span id="line1260"></span> jg.drawEllipse(16, 240+dy, 59, 130);
<span id="line1261"></span> jg.setFont("arial,helvetica,sans-serif", "11px", Font.PLAIN);
<span id="line1262"></span> jg.drawString("</span><span><n</span><span>obr>.drawEllipse(&nbsp;)</span><span><\</span><span>/nobr>",35, 180+dy);
<span id="line1263"></span> jg.drawString(".fillPolygon(&nbsp;)", 360, 66+dy);
<span id="line1264"></span> jg.drawLine(62, 197+dy, 48, 234+dy);
<span id="line1265"></span> jg.drawLine(48, 234+dy, 45, 224+dy);
<span id="line1266"></span> jg.drawLine(49, 234+dy, 57, 228+dy);
<span id="line1267"></span> jg.setColor("#008800");
<span id="line1268"></span> jg.drawOval((250+wc+300)>>1, 4+dy, 64, 64);
<span id="line1269"></span> jg.drawString("These are not image files.</span><span><b</span><span>r>Shapes &amp; text have been dynamically drawn with wz_jsgraphics.js.", ((wc+280)>>1)-100, 190+dy);
<span id="line1270"></span>
<span id="line1271"></span> jg.setStroke(2);
<span id="line1272"></span> jg.setColor("#ff99b6");
<span id="line1273"></span> jg.drawLine(120, -60+dy, 265, 150+dy);
<span id="line1274"></span> jg.setColor("#ff0080");
<span id="line1275"></span> jg.setStroke(1);
<span id="line1276"></span> jg.drawString("</span><span><n</span><span>obr>.drawLine(&nbsp;)</span><span><\</span><span>/nobr>", 190, 145+dy);
<span id="line1277"></span> var polylx=new Array(420, ((wc+280)>>1)+240, ((wc+280)>>1)+120, (wc</span><span><<</span><span></span><span>1</span><span>)-100);
<span id="line1278"></span> var polyly=new Array(160+dy, 112+dy, 350+dy, 450+dy);
<span id="line1279"></span> jg.drawPolyline(polylx, polyly);
<span id="line1280"></span> jg.drawString(".drawPolyline(&nbsp;)", ((wc+280)>>1)+126, 155+dy);
<span id="line1281"></span>
<span id="line1282"></span> jg.setColor("#ffe600");
<span id="line1283"></span> jg.fillPolygon(new Array(383, 390, 397, 420, 397, 390, 383, 360), new Array(23+dy, 0+dy, 23+dy, 30+dy, 37+dy, 60+dy, 37+dy, 30+dy));
<span id="line1284"></span>
<span id="line1285"></span> var polygx=new Array(177, 247, 115);
<span id="line1286"></span> var polygy=new Array(24+dy, 45+dy, 140+dy);
<span id="line1287"></span> jg.setColor("#0000cc");
<span id="line1288"></span> jg.drawPolygon(polygx, polygy);
<span id="line1289"></span> jg.drawString(".drawPolygon(&nbsp;)", 256, 30+dy);
<span id="line1290"></span>
<span id="line1291"></span> jg.setColor("#aabbff");
<span id="line1292"></span> jg.setStroke(5);
<span id="line1293"></span> jg.drawOval(300, 110+dy, 80, 50);
<span id="line1294"></span>
<span id="line1295"></span> // Smiley
<span id="line1296"></span> jg.fillOval(wc+292, 36+dy, 15, 15);
<span id="line1297"></span> jg.setColor("#990099");
<span id="line1298"></span> jg.setStroke(Stroke.DOTTED);
<span id="line1299"></span> jg.drawRect(wc+280, dy, 40, 50);
<span id="line1300"></span> jg.drawString("</span><span><n</span><span>obr>.drawRect(&nbsp;)</span><span><\</span><span>/nobr>", wc+210, 20+dy);
<span id="line1301"></span> jg.setStroke(1);
<span id="line1302"></span> jg.drawOval(wc+292, 36+dy, 14, 14);
<span id="line1303"></span> jg.setColor("#000033");
<span id="line1304"></span> jg.fillRect(wc+295, 41+dy, 2, 2);
<span id="line1305"></span> jg.fillRect(wc+302, 41+dy, 2, 2);
<span id="line1306"></span> jg.drawLine(wc+295, 45+dy, wc+296, 46+dy);
<span id="line1307"></span> jg.drawLine(wc+297, 47+dy, wc+301, 47+dy);
<span id="line1308"></span> jg.drawLine(wc+301, 47+dy, wc+303, 45+dy);
<span id="line1309"></span> jg.setColor("#0000cc");
<span id="line1310"></span> jg.drawString(".fillEllipse(&nbsp;)", wc+214, 36+dy);
<span id="line1311"></span>
<span id="line1312"></span> // Pie
<span id="line1313"></span> jg.setColor("#0000ff");
<span id="line1314"></span> jg.drawString(".fillArc(&nbsp;)", wc+240, 120+dy);
<span id="line1315"></span> jg.setColor("#999999");
<span id="line1316"></span> jg.fillOval(wc+210, 150+dy, 120, 80);
<span id="line1317"></span> jg.setColor("#ff8080");
<span id="line1318"></span> jg.fillArc(wc+210, 140+dy, 120, 80, 330, 40);
<span id="line1319"></span> jg.setColor("#8080ff");
<span id="line1320"></span> jg.fillArc(wc+210, 140+dy, 120, 80, 40, 140);
<span id="line1321"></span> jg.setColor("#ff80ff");
<span id="line1322"></span> jg.fillArc(wc+210, 140+dy, 120, 80, 140, 180);
<span id="line1323"></span> jg.setColor("#80bb80");
<span id="line1324"></span> jg.fillArc(wc+210, 140+dy, 120, 80, 180, 280);
<span id="line1325"></span> jg.setColor("#ffcc66");
<span id="line1326"></span> jg.fillArc(wc+210, 140+dy, 120, 80, 280, 330);
<span id="line1327"></span>
<span id="line1328"></span> jg.paint();
<span id="line1329"></span>}
<span id="line1330"></span>
<span id="line1331"></span>
<span id="line1332"></span>
<span id="line1333"></span>if(document.all && !document.getElementById)
<span id="line1334"></span>{
<span id="line1335"></span> window.onload = function()
<span id="line1336"></span> {
<span id="line1337"></span> window.setTimeout("D();", 100);
<span id="line1338"></span> }
<span id="line1339"></span>}
<span id="line1340"></span>else D();
<span id="line1341"></span>//-->
<span id="line1342"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line1343"></span>
<span id="line1344"></span></span><span class="comment"><!--script type="text/javascript" src="../scripts/wz_dragdrop.js"></script>
<span id="line1345"></span><script language="JavaScript" type="text/javascript">
<span id="line1346"></span><!-
<span id="line1347"></span>
<span id="line1348"></span>SET_DHTML(CURSOR_MOVE, KEYDOWN_RESIZE, "test", "stairsdemo");
<span id="line1349"></span>
<span id="line1350"></span>//->
<span id="line1351"></span></script--></span><span>
<span id="line1352"></span>
<span id="line1353"></span></span><span></<span class="end-tag">body</span>></span><span>
<span id="line1354"></span></span><span></<span class="end-tag">html</span>></span><span>
<span id="line1355"></span></span></pre></body></html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer