자바스크립트를 이용한 그림판(?)

실제 그림판이라고 할 수는 없고...

마우스 위치에 점을 찍을 수 있는 정도...

그 점이 모여서 선이 될 정도는 아니고 띄엄띄엄 찍히는 정도다.

마우스 눌렀을 때만 그려져야 되는데 한 번 그리고, 연달아 그리면 안 그려지고, 마우스를 떼면 (안 그려져야 되는데) 그려지는 버그도 있다.

〈div id=point style=width:1px;height:1px;font-size:0pt;border:0px;position:absolute;display:none>〈/div>
〈div title=black style=cursor:pointer;width:30px;height:30px;background:black onclick=pointcolor='black'>〈/div>
〈div title=white style=cursor:pointer;width:30px;height:30px;background:white onclick=pointcolor='white'>〈/div>
〈div title=red style=cursor:pointer;width:30px;height:30px;background:red onclick=pointcolor='red'>〈/div>
〈div title=blue style=cursor:pointer;width:30px;height:30px;background:blue onclick=pointcolor='blue'>〈/div>
〈div title=yellow style=cursor:pointer;width:30px;height:30px;background:yellow onclick=pointcolor='yellow'>〈/div>
〈div title=tan style=cursor:pointer;width:30px;height:30px;background:tan onclick=pointcolor='tan'>〈/div>
〈div title=bisque style=cursor:pointer;width:30px;height:30px;background:bisque onclick=pointcolor='bisque'>〈/div>
〈div title=brown style=cursor:pointer;width:30px;height:30px;background:brown onclick=pointcolor='brown'>〈/div>
〈div title=skyblue style=cursor:pointer;width:30px;height:30px;background:skyblue onclick=pointcolor='skyblue'>〈/div>
〈div title=navy style=cursor:pointer;width:30px;height:30px;background:navy onclick=pointcolor='navy'>〈/div>
〈div title=green style=cursor:pointer;width:30px;height:30px;background:green onclick=pointcolor='green'>〈/div>
〈div title=ivory style=cursor:pointer;width:30px;height:30px;background:ivory onclick=pointcolor='ivory'>〈/div>
〈div title=+ style=cursor:pointer;font-size:50px onclick=pointsize++>+〈/div>
〈div title=- style=cursor:pointer;font-size:50px onclick=pointsize-->-〈/div>
〈div style="position:absolute;left:50px;top:10px;width:500px;height:500px;border:1px solid;background:#eeeeee">〈/div>

〈script>
  document.onmousedown=new Function('on=true')
  document.onmouseup=new Function('on=false')
  document.onmousemove=setpoint
  var pointcolor='black'
  var pointsize=1
  var on=false

  function setpoint(e){
    if(on==true){
      var x,y
      if(e){
        //불여우용
        x=e.pageX
        y=e.pageY
      }
      else{
        //ie용
        x=window.event.clientX
        y=window.event.clientY
      }
      if(x>50 && x〈550 && y>10 && y〈510){
        if(pointsize〈1){
          pointsize=1
        }
        pointobj=document.getElementById('point').cloneNode(true)
        pointobj.style.left=x
        pointobj.style.top=y
        pointobj.style.width=pointsize
        pointobj.style.height=pointsize
        pointobj.style.background=pointcolor
        pointobj.style.display=''
        document.body.appendChild(pointobj)
      }
    }
  }
〈/script>