Please help with the code
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Move</title> </head> <body> <script> var canvas, ctx, num = 0; var box = []; var dragok = false; var startX; var startY; var offsetX = 10; var offsetY = 10; function main() { canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); canvas.width = 300; canvas.height = 300; canvas.style.background = "#444444"; document.body.appendChild(canvas); box.push({ x: 30, y: 100, z: 0, width: 30, height: 30, fill: "#4CFF00", isDragging: false, }); box.push({ x: 70, y: 100, z: 1, width: 30, height: 30, fill: "#ff550d", isDragging: false }); box.push({ x: 110, y: 100, z: 2, width: 30, height: 30, fill: "#FFE347", isDragging: false }); box.push({ x: 150, y: 100, z: 3, width: 30, height: 30, fill: "#23FFCB", isDragging: false }); draw(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; canvas.onmousemove = myMove; } function myMove(e) { if (dragok) { var mx = parseInt(e.clientX - offsetX); var my = parseInt(e.clientY - offsetY); var dx = mx - startX; var dy = my - startY; for (var i = 0; i < box.length; i++) { if (box[i].isDragging == true) { box[i].x += dx; box[i].y += dy; } } draw(); startX = mx; startY = my; } } function myUp(e) { dragok = false; for (var i = 0; i < box.length; i++) { box[i].isDragging = false; } } function myDown(e) { var mx = parseInt(e.clientX - offsetX); var my = parseInt(e.clientY - offsetY); dragok = true; var group = []; for (var i = 0; i < box.length; i++) { if (mx > box[i].x && mx < box[i].x + box[i].width && my > box[i].y && my < box[i].y + box[i].height) { group.push(box[i]); } } if (group.length === 1) { group[0].isDragging = true; } else if (group.length >= 2) { var maxZ = group[0].z; var b = group[0]; for (var i = 1; i < group.length; i++) { if (maxZ < group[i].z) { maxZ = group[i].z; b = group[i]; } } b.isDragging = true; } startX = mx; startY = my; } function rect(r) { ctx.fillStyle = r.fill; ctx.fillRect(rx, ry, r.width, r.height); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < box.length; i++) { rect(box[i]); } } main(); </script> </body> </html> 