How to paint on qml canvas on signal clicked from qt quick contols button?

[pnmrvvtl]

I have example where painting on canvas in qml starts at beggining of application:
@import QtQuick 2.0

Canvas {
id: root
// canvas size
width: 200; height: 200
// handler to override for drawing
onPaint: {
// get context to draw with
var ctx = getContext("2d")
// setup the stroke
ctx.lineWidth = 4
ctx.strokeStyle = "blue"
// setup the fill
ctx.fillStyle = "steelblue"
// begin a new path to draw
ctx.beginPath()
// top-left start point
ctx.moveTo(50,50)
// upper line
ctx.lineTo(150,50)
// right line
ctx.lineTo(150,150)
// bottom line
ctx.lineTo(50,150)
// left line through path closing
ctx.closePath()
// fill using fill style
ctx.fill()
// stroke using line width and stroke style
ctx.stroke()
}
}@

How to run this code for painting when i click at button created in qml. It seems to be like how to connect qml signal from button and slot in qlm for painting some figure without using c++. Thank you.

[A Former User]

Hi!

Signal/slot connection in QML works like this:

@
Component.onCompleted: {
mybutton.onClicked.connect( root.requestPaint )
}
@

Cheers!

[A Former User]

Or you could simply write:

@
Button {
text: "click"
onClicked: root.requestPaint()
}
@

[pnmrvvtl]

is "root" object created by me? and requestPaint() is slot created by me?

[A Former User]

"root" is the id of the canvas in your example and requestPaint() is a slot of the Canvas component. Take a look at the "Canvas documentation":http://doc.qt.io/qt-5/qml-qtquick-canvas.html to see what requestPaint() does.

Cheers!