I would really appreciate If someone could figure out what is wrong with my functions. I’m working on this simple paint program and I have Undo and Clear buttons. Undo is supposed to clear the last drawn line (the function deletes the last element of the array since the array consist of all the drawn lines on the canvas) and Clear just takes the canvas back to It’s formal state (makes the board completely white). But every time I put any of those functions in the code my canvas just deletes Itself and I can’t seem to figure out what’s wrong. The function names are clear_canvas and undo_last. Any tips or solutions on how to fix or make another working example?
JavaScript
x
278
278
1
<head>2
<img src="logo.png" style="width:50%; margin-right: auto; margin-left: 400px; ">3
</head>4
5
<style>6
7
body, a, a:hover { cursor:url('https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'), auto 8
}9
10
body {11
transform-style: preserve-3d;12
background-image: url('img_girl.jpg');13
background-repeat: no-repeat;14
background-attachment: fixed;15
}16
17
18
19
canvas {20
cursor: pointer;21
display: block;22
margin-left: auto;23
margin-right: auto;24
margin-top: 200px;25
padding: 5px;26
27
}28
29
30
.tools .color-field {31
height: 40px;32
width: 40px;33
cursor: pointer;34
display: inline-block;35
box-sizing: border-box;36
border-radius: 50%;37
border: 2px solid white;38
align-self: center;39
margin: 5px 5px ;40
41
42
}43
44
45
.color-field {46
47
display: block;48
margin-left: auto;49
margin-right: auto;50
51
}52
53
54
.tools {55
display: flex;56
justify-content: center;57
flex-direction: row;58
margin-top: 110px;59
}60
61
.tools .button{62
align-self: center;63
width: 100px;64
height: 40px;65
border: 2px solid white;66
cursor: pointer;67
color: white;68
background: #DB7093;69
font-weight: bold;70
margin: 0 10px;71
display: block;72
73
}74
75
76
.button {77
78
display: block;79
margin-left: auto;80
margin-right: auto;81
}82
83
84
.color-picker {85
align-self: center;86
margin: 0 15px;87
background-color: pink;88
}89
90
.pen-range {91
align-self: center;92
margin: o 15px;93
background-color: #DB7093;94
95
}96
97
98
.container {99
width: 600px;100
display: block;101
margin-left: auto;102
margin-right: auto;103
position: absolute;104
z-index:-1;105
margin-left: 425px;106
107
108
}109
110
#gif {111
background-image: url("gif.gif");112
position: fixed;113
width: 100%;114
transform: translateZ(-1px);115
top: 0;116
left: 0;117
118
119
}120
121
122
</style>123
124
125
<body style="background-image: url('https://images8.alphacoders.com/105/1055726.png');">126
127
128
<div id="gif"> <img src="gif.gif"> </div>129
130
131
<meta charset="UTF-8"/>132
<meta name="viewport" content="width=device-width, initial-scale=1.0">133
<title> cute drawing program </title>134
135
136
137
<div class="container">138
<div id="status" style="color: white;"></div>139
<img src="container.png" style="width:120%;">140
</div>141
142
143
<div class="field">144
<canvas id="canvas"> </canvas>145
146
<div class="tools">147
<button onClick="undo_last()" type="button" class="button"> Undo </button>148
<button onClick="clear_canvas()" type="button" class="button"> Clear </button>149
150
151
<div onClick="change_color(this)" class="color-field" style="background: red;"></div>152
<div onClick="change_color(this)" class="color-field" style="background: blue;"></div>153
<div onClick="change_color(this)" class="color-field" style="background: yellow;"></div>154
<div onClick="change_color(this)" class="color-field" style="background: green;"></div>155
<div onClick="change_color(this)" class="color-field" style="background: orange;"></div>156
<div onClick="change_color(this)" class="color-field" style="background: pink;"></div>157
<div onClick="change_color(this)" class="color-field" style="background: brown;"></div>158
<div onClick="change_color(this)" class="color-field" style="background: gray;"></div> 159
<div onClick="change_color(this)" class="color-field" style="background: black;"></div>160
<div onClick="change_color(this)" class="color-field" style="background: white;"></div>161
162
<input onInput="draw_color = this.value" type="color" class="color-picker">163
<input type="range" min="1" max="100" class="pen-range" onInput="draw_width = this.value">164
</div>165
</div>166
167
<script>168
169
const canvas = document.getElementById("canvas");170
canvas.width = window.innerWidth = 650;171
canvas.height = 350;172
173
let context = canvas.getContext("2d");174
let start_background_color ="white";175
context.fillStyle = start_background_color;176
context.fillRect(0, 0, canvas.width, canvas.height);177
178
179
let draw_color = "black";180
let draw_width = "2";181
let is_drawing = false;182
183
let restore_array =[];184
let index = -1;185
186
187
function change_color(element) {188
draw_color = element.style.background;189
}190
191
canvas.addEventListener("touchstart", start, false);192
canvas.addEventListener("touchmove", draw, false);193
canvas.addEventListener("mousedown", start, false);194
canvas.addEventListener("mousemove", draw, false);195
196
canvas.addEventListener("mtouchstart", stop, false);197
canvas.addEventListener("mouseup", stop, false);198
canvas.addEventListener("mouseout", stop, false);199
200
201
function start(event) {202
is_drawing = true;203
context.beginPath();204
context.moveTo(event.clientX - canvas.offsetLeft,205
event.clientY - canvas.offsetTop);206
207
event.preventDefault();208
}209
210
function draw(event) {211
if ( is_drawing ) {212
context.lineTo(event.clientX - canvas.offsetLeft,213
event.clientY - canvas.offsetTop);214
context.strokeStyle = draw_color;215
context.lineWidth = draw_width;216
context.lineCap = "round";217
context.lineJoin = "round";218
context.stroke();219
}220
221
event.preventDefault();222
}223
224
225
function stop(event) {226
if (is_drawing) {227
context.stroke();228
context.closePath();229
is_drawing = false;230
}231
232
event.preventDefault();233
234
235
if (event.type != 'mouseout'){236
restore_array.push(context.getImageData(0, 0, canvas.width, canvas.height));237
index += 1;238
}239
}240
241
function undo_last(){242
if (index <= 0) {243
clear_canvas();244
}245
else {246
index -=1;247
restore _array.pop();248
context.putImageData(restore_array[index], 0, 0);249
250
}251
252
}253
254
255
function clear_canvas() {256
context.fillStyle = start_background_color;257
context.clearRect(0, 0, canvas.width, canvas.height);258
context.fillRect(0, 0, canvas.width, canvas.height);259
260
restore_array = [];261
index = -1;262
} 263
264
265
</script>266
267
268
269
</body>270
271
272
273
274
275
276
277
</html>278
Advertisement
Answer
You should use console.log. You should also be getting an error that helps identify your issue when you run the script.
Check this line in undo_last
JavaScript
1
2
1
restore _array.pop();2
It should be
JavaScript
1
2
1
restore_array.pop();2