Untitled

//learnKanji.js
function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return [curleft,curtop];
  }
}

//globale veriablen
var mdown = false;
var offset = [0,0];
sval = new Array(110,110);
var canvas = document.getElementById('zeichnen');
var context = canvas.getContext('2d');
context.lineWidth=4;
context.strokeStyle = "#00f";

function setOffset(){
  offset = findPos(document.getElementById('zeichnen'));
}

function start(evt){
  mdown = true;
  sval[0]=evt.clientX - offset[0];
  sval[1]=evt.clientY - offset[1];
}

function func(evt){
  if(mdown){
  var xco = evt.clientX - offset[0];
  var yco = evt.clientY - offset[1];
  context.moveTo(sval[0],sval[1]);
  context.lineTo(xco,yco);
  sval[0]=xco;
  sval[1]=yco;

  context.stroke();
  }
}

function stop(){
  mdown=false;
}

function correct(){
  document.getElementById('zeichnen').style.backgroundImage="url('./img/hito.png')";
}


//Index.HTML

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
  <body onload="setOffset();">
    <div id="bg">
    <div id="main">
    <canvas id="zeichnen" onmousemove="func(event);" onmouseup="stop();" onmousedown="start(event);">Dein Browser kann diese Grafik nicht darstellen.</canvas>
    <div id="info"><INPUT TYPE=BUTTON VALUE="Fertig" onClick="correct();"></div>
    </div>
    </div>
    <script type="text/javascript" src="learnKanji.js"></script>
  </body>
</html>

//stles.css
#bg{
  position:relative;
}

#main{
  position:absolute;
  top:0px;
  left:15%;
  width:225;
}

#zeichnen{
  width:221px;
  height:221px;
  position:absolute;
  top:1px;
  left:2px;
  border:2px solid #FF0040;
  background-color:#FCEEE8;
}

#info{
  position:absolute;
  left:2px;
  top:223px;
  border:1px solid #0000;
}