Line colors overlap when changed - qt

Question

I am working on an QML program in which I change the color and the border color of a polygon painted on a Canvas. I have 2 buttons that change the colors, ie. 1 button making the border color red and the other one blue.
My problem is that each time I change the color set, the border of the polygon seems "corrupted", such as the used border colors mixed with each other. The drawn polygon is being resized each time I resize the window. So when I resize, its being repainted I believe. The colors are getting fixed at that point.
My question is: is there a way to disable the overlapping or is there a way to manually force the redrawing of all Canvases in the project?
Ucolors.qml:
import QtQuick 2.9
/**
* #brief Holds the color parameters of the whole UI
*
*/
Item
{
property var canvas
property var text
property var spiderBckgrnd
property var spiderLines
}
main.qml
Ucolors
{
id: colDay
canvas: "#eaedf1"
text: "#0e0e12"
spiderBckgrnd: "#f7fbff"
spiderLines: "#C8CBD0"
}
Ucolors
{
id: colNight
canvas: "#22212c"
text: "#ffffff"
spiderBckgrnd: "#0e0e12"
spiderLines: "#3C3C3F"
}
property var colGlob: colDay
Button
{
id: btn1
anchors.left: parent.left
text: "button1"
onClicked:
{
colGlob = colNight;
}
}
Button
{
id: btn2
anchors.left: btn1.right
text: "button2"
onClicked:
{
colGlob = colDay;
}
}
Then in the code colors are set like this: some_property: colGlob.spiderLines

Answer 1

If you do not explicitely call clearRect() on the context object of your Canvas, any drawing is painted on the existing content.
Since you're drawing a polygon, some antialiasing pixels are added on the edges to get smooth lines. Those pixels are semi-transparent, so when you draw the same polygon over the existing one with another color, color blending occurs on the edges; hence the "corrupted" appearance.
When you change the height or width of the canvas, the context is implicitely cleared, so the "corrupted" edge disappears.
An easy fix is to call clearRect in the onPaint handler of your Canvas.
Canvas
{
id: canvas
onPaint: {
var ctx = getContext("2d")
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height)
// Draw anything you want
...
}
}
Here is a small example that reproduces your problem, and show how it is fixed by calling clearRect
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
ApplicationWindow {
id: root
visible: true
width: 400
height: 200
property string color: "red"
onColorChanged: {
canvas.requestPaint()
}
ColumnLayout
{
anchors.fill: parent
anchors.margins: 20
spacing: 20
RowLayout
{
Layout.alignment: Qt.AlignHCenter
Repeater
{
model: ["red", "blue", "yellow"]
Button
{
text: modelData
highlighted: root.color == modelData
onClicked: {
root.color = modelData
}
}
}
CheckBox
{
id: clearBeforeRepaintCb
text: "Clear before paint"
}
}
Canvas
{
id: canvas
Layout.fillHeight: true
Layout.fillWidth: true
onPaint: {
var ctx = getContext("2d")
if(clearBeforeRepaintCb.checked)
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = root.color
ctx.lineWidth = 10
ctx.beginPath()
ctx.moveTo(10, height/2)
ctx.lineTo(width-10, height/2+3)
ctx.stroke()
}
}
}
}