concepts/isketch.canvas.js at main · isketch-app/concepts · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var is_timer  = document.getElementById("isketch-canvas");
var ctx       = is_timer.getContext("2d");

var stroke    = "black";
var mousedown = false;
var drawings  = [
    {
        type: "line",
        stroke: "black",
        width: 5,
        points: [
            {
                x: 0,
                y: 20
            }, {
                x: 30,
                y: 60
            },
        ]
    }
];

ctx.strokeStyle = stroke;

function loop() {

    ctx.fillStyle = "#fff"
    ctx.fillRect(0, 0, is_timer.width, is_timer.height);


    drawings.forEach(function(draw) {
        if(draw.type == "line") {
            ctx.strokeStyle = draw.stroke;
            ctx.lineWidth = draw.width;
            ctx.beginPath();
            ctx.moveTo(draw.points[0].x, draw.points[0].y);
            draw.points.forEach(function(point) {
                ctx.lineTo(point.x, point.y);
            });
            ctx.stroke();
        }
    });


    requestAnimationFrame(loop);
}

is_timer.onpointerup = function() {
    mousedown = false;
}

is_timer.onpointerdown = function(e) {
    mousedown = true;
    drawings.push({
        type: "line",
        stroke: "black",
        width: 30,
        points: [
            {
                x: e.offsetX,
                y: e.offsetY
            }
        ]
    });
}

is_timer.onpointermove = function(e) {
    if(mousedown) {
        drawings[drawings.length - 1].points.push({
            x: e.offsetX,
            y: e.offsetY
        });
    }
}

is_timer.onpointerleave = function() {
    mousedown = false;
}

loop();