html5 ocr识别实现,javascript - OCR using HTML5 canvas - Stack Overflow

I'm a complete newbee to HTML5 and Javascript. I'm trying to make this simple app in HTML5 where a user can draw any alphabet on the canvas and the alphabet gets recognized using ocrad.js. However, upon executing this script, no matter what alphabet i draw, the output is always the alphabet 'I'. My guess is that an empty canvas is being passed as an argument to OCRAD or there is an error in linking ocrad.js .

I'm not even sure, how to include the ocrad API as 'src' as i'm completely new to Javascript. Here's what i have written so far.

var cnv = document.getElementById('myCanvas')

var ctx = cnv.getContext('2d')

var lc=0

var prX=-1

var prY=-1

var dot= ctx.createImageData(2,2)

for (i=0; i

dot.data[i+0]=0

dot.data[i+1]=160

dot.data[i+2]=230

dot.data[i+3]=255

}

document.getElementById('clear').addEventListener('click', function() {

ctx.clearRect(0, 0, cnv.width, cnv.height);

}, false);

function release(){

lc=0

prX=-1

}

function putPoint(event){

var bb, x, y

bb = cnv.getBoundingClientRect()

x = (event.clientX-bb.left) * (cnv.width/bb.width)

y = (event.clientY-bb.top) * (cnv.height/bb.height)

ctx.putImageData(dot,x,y)

}

function Draw(event){

if(lc==1){

var bb, x, y

bb = cnv.getBoundingClientRect()

x = (event.clientX-bb.left) * (cnv.width/bb.width)

y = (event.clientY-bb.top) * (cnv.height/bb.height)

if (prX!=-1){

ctx.beginPath()

ctx.moveTo(prX,prY)

ctx.lineTo(x,y)

ctx.lineWidth=10

ctx.closePath()

ctx.strokeStyle='rgb(0,0,0)'

ctx.stroke()

}

prX=x

prY=y

}

}

document.getElementById('recognize').addEventListener('click', function() {

var string = OCRAD(cnv)

alert(string)

});

Any help in fixing this is appreciated. Thank You.