Canvas - not drawing at correct position

I have a canvas wrapped in dialog element and I have implemented a drawing app so I can draw something on canvas but it's not drawing on correct position of touch Html close Open #d { border:none;outline:none; padding:0; } Js const ctx = c.getContext("2d") const size = 5 , Color = "red" , cx = ((screen.width - c.width ) / 2) - 25, cy = ((screen.height - c.height) / 2) - 25 console.log(cx,cy) let sx = 0 , sy = 0 c.ontouchstart = (e) => { const t = e.touches[0] sx = t.clientX - cx sy = t.clientY - cy } c.ontouchmove = (e) => { const t = e.touches[0] ctx.beginPath() ctx.moveTo(sx,sy) ctx.lineTo(t.clientX - cx, t.clientY - cy) ctx.lineWidth = size ctx.strokeStyle = Color ctx.lineCap = "round" ctx.stroke() sx = t.clientX - cx sy = t.clientY - cy }