Drawing vector graphics in DHTML with Javascript

Code with sample:

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

For discussion, and further information about this script, see imgdraw.htm