parsebyocr/canvas.js at master · costiagur/parsebyocr · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var canv = new Object()
const imcanv = document.getElementById('imcanv');
canv.ctx = [];

canv.i=0;

canv.startx = 0;
canv.starty = 0;
canv.midx = 0;
canv.midy = 0;

canv.isdrawing = false


canv.mousedown = function(event){ //set first point of drawing

    if (canv.isdrawing == false){

        if(canv.i>0){
            canv.ctx[canv.i-1].beginPath();
            canv.ctx[canv.i-1].clearRect(canv.startx, canv.starty, canv.midx-canv.startx, canv.midy-canv.starty);
            //delete previous drawing
        }

        canv.isdrawing = true;

        canv.ctx[canv.i] = imcanv.getContext('2d');
        canv.ctx[canv.i].fillStyle = 'rgba(153, 255, 153, 0.4)';

        canv.startx = event.offsetX;
        canv.starty = event.offsetY;
        canv.midx = canv.startx;
        canv.midy = canv.starty;
    }
}

canv.mousemove = function(event){ //while drawing. set last point of drawing
    if (canv.isdrawing == true) {

        canv.ctx[canv.i].beginPath();
        canv.ctx[canv.i].clearRect(canv.startx, canv.starty, canv.midx-canv.startx, canv.midy-canv.starty);

        canv.midx = event.offsetX;
        canv.midy = event.offsetY;

        canv.ctx[canv.i].rect(canv.startx, canv.starty, canv.midx-canv.startx, canv.midy-canv.starty);
        canv.ctx[canv.i].fill();

        document.getElementById("pointsxy").innerHTML = canv.startx + "," + canv.starty + "," + event.offsetX + "," + event.offsetY + "," + document.getElementById("testpagenum_in").value;
    }
};

canv.mouseup = function(event) { //when stopped drawing
    if (canv.isdrawing == true) {


        canv.isdrawing = false;

        canv.i++;
    }
};

imcanv.onmousedown = canv.mousedown;
imcanv.onmousemove = canv.mousemove;
imcanv.onmouseup = canv.mouseup;