Drawing issue

Tikani

Hi! I use Canvas in my project to free draw anything with mouse, but while drawing all traces come out like on the picture below.

Drawing issue example

Here below is my code responsible for drawing:

    Canvas {
        id:canvas
        anchors.top: parent.top
        width: 640
        height: 410

        onPaint: {
            var ctx = getContext('2d')

            if(clearCanvas) {
                ctx.fillStyle = "white"
                ctx.fillRect(0,0,width,height)
                clearCanvas=false
            }
            else {
                ctx.lineWidth = 30
                ctx.strokeStyle = 'blue'
                ctx.beginPath()
                ctx.moveTo(xpos,ypos)
                xpos = area.mouseX
                ypos = area.mouseY
                ctx.lineTo(xpos, ypos)
                ctx.stroke()
            }
        }

        MouseArea {
            id:area
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton

            onPressed: {
                if(mouse.buttons & Qt.LeftButton) {
                    hold=true
                    xpos = mouseX
                    ypos = mouseY
                }
            }

            onPositionChanged: {
                if(hold & (mouse.buttons & Qt.LeftButton)) {
                    canvas.requestPaint()
                }
            }

            onReleased: {
                hold = false
            }

            onClicked: {
                infoArea.visible = false
            }
        }

Finally I want to have a solid line without gaps. Count on your help!

p3c0

@Tikani Set lineCap to round

ctx.lineCap = 'round';