title: How can I get pixel array from qml canvas?
body: <p>I have a Canvas with the image, that I load via filedialog, how can I get the pixel array of this image?
  I need convert it to grayscale by converting every pixel using formula and load it back to the Canvas.
  Here the code:</p>
  
  <pre><code>import QtQuick 2.0
  import QtQuick.Controls 2.1
  import QtQuick.Controls.Material 2.1
  import QtQuick.Layouts 1.2
  import QtQuick.Dialogs 1.0
  
  ApplicationWindow {
      id: window
      visible: true
      width: 1000
      height: 750
      Material.theme: Material.Dark
      Material.background: "#2C303A"
      Material.accent: "#65B486"
      Material.foreground: "#efefef"
  
      GridLayout {
          anchors.top: parent.top
          anchors.left: parent.left
          anchors.right: parent.right
          anchors.margins: 9
  
          columns: 4
          rows: 3
          rowSpacing: 10
          columnSpacing: 10
          Canvas {
              id: canvas
              height: window.height - 15
              Layout.columnSpan: 4
              Layout.fillWidth: true
              property bool loaded: false
              property var filepath: ''
  
              onDrawChanged: requestPaint()
              onFilepathChanged: {
                  loadImage(filepath)
              }
              onImageLoaded: {
                  loaded = true
                  requestPaint()
              }
              onPaint: {
                  if (loaded) {
                      var ctx = getContext("2d");
                      ctx.drawImage(filepath, 0, 0, width, height)
                  }
                  if (to_grayscale) {
                      var ctx = getContext("2d");
                      var ar = ctx.getImageData(0, 0, width, height).data
                      for(var i in ar){
                          print(i)
                      }
                  }
              }
          }
  
          FileDialog {
              id: fileDialog
              title: "Please choose a file"
              nameFilters: ["Image files (*.jpg *.png *.jpeg)"]
              onAccepted: {
                  console.log("You chose: " + fileDialog.fileUrls)
                  canvas.filepath = fileDialog.fileUrls
                  canvas.requestPaint()
              }
              onRejected: {
                  console.log("Canceled")
              }
          }
          Drawer {
              id: drawer
              visible: true
              modal: false
              width: 0.33 * window.width
              height: window.height
              GridLayout {
                  anchors.top: parent.top
                  anchors.left: parent.left
                  anchors.right: parent.right
                  anchors.margins: 9
  
                  columns: 2
                  rows: 3
                  rowSpacing: 10
                  columnSpacing: 10
                  Button {
                      text: 'Load image'
                      onClicked: fileDialog.visible = true
                  }
  
                  Button {
                      text: 'RGB to Grayscale'
                      onClicked: canvas.draw = true
                  }
              }       
          }
      }
      }
  </code></pre>
  
  <p>I'm trying to get ImageData, but here's empty
  I read that Canvas contain PixelArray, but I don't know how to get it.
  Thank you.</p>