1 | import js.dom |
2 | |
3 | fn get_canvas(elem JS.HTMLElement) JS.HTMLCanvasElement { |
4 | match elem { |
5 | JS.HTMLCanvasElement { |
6 | return elem |
7 | } |
8 | else { |
9 | panic('Not a canvas') |
10 | } |
11 | } |
12 | } |
13 | |
14 | fn draw_line(mut context JS.CanvasRenderingContext2D, x1 int, y1 int, x2 int, y2 int) { |
15 | context.beginPath() |
16 | context.strokeStyle = 'black'.str |
17 | context.lineWidth = JS.Number(1) |
18 | context.moveTo(x1, y1) |
19 | context.lineTo(x2, y2) |
20 | context.stroke() |
21 | context.closePath() |
22 | } |
23 | |
24 | struct DrawState { |
25 | mut: |
26 | context JS.CanvasRenderingContext2D |
27 | drawing bool |
28 | x int |
29 | y int |
30 | } |
31 | |
32 | fn main() { |
33 | window := dom.window() |
34 | document := dom.document |
35 | clear_btn := document.getElementById('clearButton'.str)? |
36 | canvas_elem := document.getElementById('canvas'.str)? |
37 | canvas := get_canvas(canvas_elem) |
38 | ctx := canvas.getContext('2d'.str, js_undefined())? |
39 | context := match ctx { |
40 | JS.CanvasRenderingContext2D { |
41 | ctx |
42 | } |
43 | else { |
44 | panic('can not get 2d context') |
45 | } |
46 | } |
47 | mut state := DrawState{context, false, 0, 0} |
48 | |
49 | canvas.addEventListener('mousedown'.str, fn [mut state] (event JS.Event) { |
50 | state.drawing = true |
51 | match event { |
52 | JS.MouseEvent { |
53 | state.x = int(event.offsetX) |
54 | state.y = int(event.offsetY) |
55 | } |
56 | else {} |
57 | } |
58 | }, JS.EventListenerOptions{}) |
59 | canvas.addEventListener('mousemove'.str, fn [mut state] (event JS.Event) { |
60 | if state.drawing { |
61 | match event { |
62 | JS.MouseEvent { |
63 | draw_line(mut state.context, state.x, state.y, int(event.offsetX), |
64 | int(event.offsetY)) |
65 | state.x = int(event.offsetX) |
66 | state.y = int(event.offsetY) |
67 | } |
68 | else {} |
69 | } |
70 | } |
71 | }, JS.EventListenerOptions{}) |
72 | |
73 | window.addEventListener('mouseup'.str, fn [mut state] (event JS.Event) { |
74 | if state.drawing { |
75 | match event { |
76 | JS.MouseEvent { |
77 | draw_line(mut state.context, state.x, state.y, int(event.offsetX), |
78 | int(event.offsetY)) |
79 | } |
80 | else {} |
81 | } |
82 | state.x = 0 |
83 | state.y = 0 |
84 | state.drawing = false |
85 | } |
86 | }, JS.EventListenerOptions{}) |
87 | clear_btn.addEventListener('click'.str, fn [mut state, canvas] (_ JS.Event) { |
88 | state.context.clearRect(0, 0, canvas.width, canvas.height) |
89 | }, JS.EventListenerOptions{}) |
90 | } |