Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-84757

Resized Qt Quick Canvas element corrupted with WebAssembly

    XMLWordPrintable

Details

    • WebAssembly

    Description

      I have Qt 5.15.0 and emsdk 1.39.8 installed on Fedora 32. Built my app, executed with emrun. The app contains various items drawn with Canvas 2D API (arc(), lineTo(), bezierCurveTo(), both fill() and stroke()). Running the WebAssembly version on Linux Chromium, Firefox and Android Chrome results in all the app Canvas elements to be drawn corrupted, see attached screenshot. Seems the issue is caused by app's responsive layouts (child dimensions are inferred from parent dimensions, not unusual practice), which respectively causes the canvas items to change dimensions during loading.

      Code to reproduce:

       

      import QtQuick 2.5
      
      Rectangle {
          id: root
      
          Canvas {
              property var array: [[width/2,0], [width, height], [0, height]]
              property color color: "black"
      
              height: width
              width: parent.width/4
              anchors.centerIn: parent
      
              Timer {
                  running: true
                  interval: 3000
                  onTriggered: parent.width = parent.width/2
              }        
              onArrayChanged: requestPaint()
              onColorChanged: requestPaint()
              onPaint: {
                  var ctx = getContext('2d')
                  ctx.save()
                  ctx.clearRect(0, 0, width, height)
                  ctx.fillStyle = color
                  ctx.beginPath()
                  ctx.moveTo(array[0][0], array[0][1])
                  for (var i = 1; i < array.length; i++) {
                      ctx.lineTo(array[i][0], array[i][1])
                  }
                  ctx.closePath()
                  ctx.fill()
                  ctx.restore()
              }
          }
      }

       

      Adding requestPaint() on width and height notify signal handers doesn't help. On other platforms the drawing functions like expected.

       

      Attachments

        1. canvas-wasm.tgz
          2 kB
          Shawn Rutledge
        2. main.qml
          1 kB
          Shawn Rutledge
        3. qtwebassembly_quickcanvas_corruption.png
          63 kB
          Joona Petrell
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            sorvig Morten Sørvig
            jpetrell Joona Petrell
            Veli-Pekka Heinonen Veli-Pekka Heinonen
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes