To work on HTML5 canvas to develop a tool similar to paint or free draw on an image, JQuery and Javascript are often used on the browser client side to perform simple tasks that would otherwise require a full postback to the server. There’re a set of keycode associated with each character on the keyboard.
To use this on your canvas on an html page, add JQuery and JavaScript to detect the key that user pressed as follow:
Key
|
Code
|
backspace
|
8
|
tab
|
9
|
enter
|
13
|
shift
|
16
|
ctrl
|
17
|
alt
|
18
|
pause/break
|
19
|
caps lock
|
20
|
escape
|
27
|
page up
|
33
|
page down
|
34
|
end
|
35
|
home
|
36
|
left arrow
|
37
|
up arrow
|
38
|
right arrow
|
39
|
down arrow
|
40
|
insert
|
45
|
delete
|
46
|
0
|
48
|
1
|
49
|
2
|
50
|
3
|
51
|
4
|
52
|
5
|
53
|
6
|
54
|
7
|
55
|
8
|
56
|
9
|
57
|
a
|
65
|
b
|
66
|
c
|
67
|
d
|
68
|
|
|
Key
|
Code
|
e
|
69
|
f
|
70
|
g
|
71
|
h
|
72
|
i
|
73
|
j
|
74
|
k
|
75
|
l
|
76
|
m
|
77
|
n
|
78
|
o
|
79
|
p
|
80
|
q
|
81
|
r
|
82
|
s
|
83
|
t
|
84
|
u
|
85
|
v
|
86
|
w
|
87
|
x
|
88
|
y
|
89
|
z
|
90
|
left window key
|
91
|
right window key
|
92
|
select key
|
93
|
numpad 0
|
96
|
numpad 1
|
97
|
numpad 2
|
98
|
numpad 3
|
99
|
numpad 4
|
100
|
numpad 5
|
101
|
numpad 6
|
102
|
numpad 7
|
103
|
|
|
Key
|
Code
|
numpad 8
|
104
|
numpad 9
|
105
|
multiply
|
106
|
add
|
107
|
subtract
|
109
|
decimal point
|
110
|
divide
|
111
|
f1
|
112
|
f2
|
113
|
f3
|
114
|
f4
|
115
|
f5
|
116
|
f6
|
117
|
f7
|
118
|
f8
|
119
|
f9
|
120
|
f10
|
121
|
f11
|
122
|
f12
|
123
|
num lock
|
144
|
scroll lock
|
145
|
semi-colon
|
186
|
equal sign
|
187
|
comma
|
188
|
dash
|
189
|
period
|
190
|
forward slash
|
191
|
grave accent
|
192
|
open bracket
|
219
|
back slash
|
220
|
close braket
|
221
|
single quote
|
222
|
|
|
|
Include JQuery before the Script: https://code.jquery.com/jquery-3.1.1.min.js
$("#deletethis, body").keydown(function(e){
if(e.keyCode == 46) {
alert('This object will be removed');
$("#deletethis").remove();
}
});
HTML section: