0

I'm making a web paint app and I'm basically finished, but it works only with on computer (not with touches). So I tried to put there some touch events, but it only works like a click instead of creating custom lines/shapes etc. I get only a dot. I'm new in touch events, so could you help please? Thank you very much.

P.S: Don't blame me for not using semicolons

JS:

let canvas = document.querySelector("canvas")
let ctx = canvas.getContext("2d")

window.addEventListener("load", () => {

let currentlyPainting = false

function startingPosition(e) {
    currentlyPainting = true
    paint(e)
}

function endingPosition() {
    currentlyPainting = false
    ctx.beginPath()
}

function paint(e) {
    
    if (!currentlyPainting) return
        ctx.lineTo(e.clientX, e.clientY)
        ctx.stroke()
        ctx.beginPath()
        ctx.moveTo(e.clientX, e.clientY)
        // there's a lot more code but it's unneccesary
    }


}

canvas.addEventListener("mousedown", startingPosition)
canvas.addEventListener("mouseup", endingPosition)
canvas.addEventListener("mousemove", paint)
canvas.addEventListener("touchstart", startingPosition)
canvas.addEventListener("touchend", endingPosition)
canvas.addEventListener("touchmove", paint)


})
PythonisFine
  • 37
  • 8
  • I just briefly looked into touch events, and... it looks like it's a bit of a mess, to say the least. While I don't have an answer for you directly, here's another answer I found that seems fairly helpful to understanding touch events: https://stackoverflow.com/a/39477086/11047824 Good luck! – zcoop98 Jul 23 '20 at 22:03
  • 1
    Thank you very much! I'll have a look at that. To me it also seems like a mess, so I hope, that I'll somehow do it. – PythonisFine Jul 24 '20 at 09:07

0 Answers0