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

Resized Qt Quick Canvas element corrupted with WebAssembly

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: P2: Important
    • Resolution: Unresolved
    • Affects Version/s: 5.15.0
    • Fix Version/s: None
    • Labels:
      None
    • Platform/s:
      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

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

            Assignee:
            sorvig Morten Sørvig
            Reporter:
            jpetrell Joona Petrell
            Votes:
            1 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:

                Gerrit Reviews

                There are no open Gerrit changes