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:

• spamade_turnerspam at hotmail.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:

  .