Fix drawing errors in HWR

Multiple issues were identified in trace rendering:

1. quadraticCurveTo() method does not move the current position to
   endpoint in all cases. This causes a rendering glitch in situations
   where the line turns back sharply on x or y axis. The correct
   position is now ensured by the following moveTo() call.
2. Although this only was happening when running test cases, sometimes
   the trace rendering was started before the style attributes were
   applied to the drawing context. Now the start of trace rendering
   is delayed until the available becomes true.
3. The final lineTo() call was lacking prior moveTo() call.

Task-number: QTRD-3680
Change-Id: I3ea311ee3a488a50f4c843a29d4c3cdd3942933a
Reviewed-by: Rainer Keller <rainer.keller@theqtcompany.com>

2 files changed, 15 insertions, 4 deletions

diff --git a/src/virtualkeyboard/styles/TraceCanvas.qml b/src/virtualkeyboard/styles/TraceCanvas.qml
index e5670ec1..b7ad547a 100644
--- a/src/virtualkeyboard/styles/TraceCanvas.qml
+++ b/src/virtualkeyboard/styles/TraceCanvas.qml
@@ -113,6 +113,8 @@ Canvas {
 
     property int __renderPos
 
+    property bool __renderingEnabled
+
     /*! Renders smoothed line with round corners.
 
         This function is incremental and renders only the new part added to the Trace.
@@ -125,8 +127,14 @@ Canvas {
 
     onTraceChanged: if (trace === null && autoDestroy) destroy(autoDestroyDelay)
 
+    onAvailableChanged: {
+        __renderingEnabled = available
+        if (__renderingEnabled)
+            requestAnimationFrame(renderFunction)
+    }
+
     Connections {
-        target: trace ? trace : null
+        target: canvas.__renderingEnabled && trace ? trace : null
         onLengthChanged: if (renderFunction) canvas.requestAnimationFrame(renderFunction)
         onFinalChanged: if (renderFunction) canvas.requestAnimationFrame(renderFunction)
     }
diff --git a/src/virtualkeyboard/styles/TraceUtils.js b/src/virtualkeyboard/styles/TraceUtils.js
index 7e225d79..1624e891 100644
--- a/src/virtualkeyboard/styles/TraceUtils.js
+++ b/src/virtualkeyboard/styles/TraceUtils.js
@@ -57,19 +57,22 @@ function renderSmoothedLine(ctx, trace, renderPos) {
             pt2 = points[i]
             tp = Qt.point((pt1.x + pt2.x) / 2, (pt1.y + pt2.y) / 2)
             ctx.quadraticCurveTo(pt1.x, pt1.y, tp.x, tp.y)
+            ctx.moveTo(tp.x, tp.y)
         }
+        ctx.stroke()
     }
 
     // Draw the remainder of the line
     if (trace.isFinal) {
         if (i < points.length) {
+            tp = points[i - 1]
+            ctx.beginPath()
+            ctx.moveTo(tp.x, tp.y)
             tp = points[i++]
             ctx.lineTo(tp.x, tp.y)
+            ctx.stroke()
         }
     }
 
-    if (i > 1)
-        ctx.stroke()
-
     return renderPos + i - 1
 }