Details
-
Bug
-
Resolution: Fixed
-
P2: Important
-
5.15.0
-
None
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.