Drawing vector graphics in DHTML with Javascript

Code:

• <script Language="JavaScript">
  
  r=0
  g=0
  b=0
  
  function pset(x,y,wi,he)
  {
    document.write ("<img src='../1x1.gif' style='z-index:-10; position:absolute; left:"+x+";top:"+y+";width:"+wi+";height:"+he+";background:rgb("+r+","+g+","+b+")'>") 
  }
  
  kx=400
  ky=400
  x0=(window.screen.width-20)/2
  y0=400
  
  r=g=b=0
  pset(x0-kx/2,y0,kx,2)
  pset(x0,y0-ky/2,2,ky)
  g=255
  for(x=-kx/4;x<kx/4;x++)
  {  
    y=x*x/kx*8
    pset(x+x0,-y+y0,2,2)
  }
  g=0
  r=255
  for(x=-kx/2;x<kx/2;x++)
  {  
    y=Math.sin(x/kx*20)*ky/10
    pset(x+x0,-y+y0,2,2)
  }
  r=0
  b=255
  for(i=-100;i<100;i=i+0.5)
  {  
    x=Math.cos(i/100*3.15)*kx/4
    y=Math.sin(i/100*3.15)*ky/4
  
    pset(x+x0,-y+y0,2,2)
  }
   
  
  </script>
  

  1x1.gif is a 1 pixel square transparent gif. To download a copy from this server, right click on this and select "Save as..."

  +

To see this code actually work, click here for a page with the javascript code embedded.

Also:

• Dynamic Inline Image generation

Questions:

• TakeThisOuTade_turner at KILLspamhotmail.com asks:

  I would like to use something like this to draw with.
  If you make subsequent calls to this in an event, this function destroys the whole html.
  How can this be avoided ?

  James Newton replies: What do you mean by "destroys the whole html"? What event are you calling it from?+

  +

Comments:

PICList 2025 contributors: o List host: MIT, Site host massmind.org, Top posters @none found - Page Editors: James Newton, David Cary, and YOU! * Roman Black of Black Robotics donates from sales of Linistep stepper controller kits. * Ashley Roll of Digital Nemesis donates from sales of RCL-1 RS232 to TTL converters. * Monthly Subscribers: Gregg Rew. on-going support is MOST appreciated! * Contributors: Richard Seriani, Sr.

  .