Risanje v JavaScript

<script type="text/javascript">
	var curPic="slika"

	function point(xx,yy,cc) {
		if(xx<0 ¦¦ yy<0 ¦¦ xx>=320 ¦¦ yy>=240) return 0
		var x=document.createElement("div")
		x.style.width="1px"
		x.style.height="1px"
		x.style.backgroundColor=cc
		x.style.top=yy+"px"
		x.style.left=xx+"px"
		x.style.overflow="hidden"
		x.style.position="absolute"
		document.getElementById(curPic).appendChild(x)
	}

function cls() {
var x=document.getElementById(curPic).cloneNode(false)
x.id=curPic+"Cloned"
document.getElementById(curPic).parentNode.insertBefore(x,document.getElementById(curPic))
document.getElementById(curPic).parentNode.removeChild(document.getElementById(curPic))
document.getElementById(curPic+"Cloned").id=curPic
}

function narisi() {
	for(var xx=0;xx<320;xx++) {
		point(xx,120-Math.sin(xx/20)*40,"black")
	}
}
</script>

<div id="slika" style="position:relative;width:320px;height:240px;border:solid 1px">
</div>
<form action="#">
 <p>
  <input type="button" value="Nariši sinus" onclick="narisi()" />
  <input type="button" value="Počisti polje" onclick="cls()" />
 </p>
</form>