How to change the color of lines created by Canvas?

[Yunus]

Hi all,

I created a painted image using canvas "fillRect" with the color of "blue". After the process of painting, I want to change my painted rectangles' color to another desired color(like black,yellow etc.). Here is my code:

Canvas {
                            id: mycanvas
                            width: 300
                            height: 300                            
                            property real lastX
                            property real lastY
                            onPaint: {
                            var ctx = getContext("2d");                            
                            ctx.fillStyle = "blue";                                 
                            lastX = painter_object.x+painter_object.width/2
                            lastY = painter_object.y+painter_object.width/2
                            ctx.fillRect(painter_object.x, painter_object.y, painter_object.width, painter_object.width);
                            ctx.fill()
                            ctx.stroke();
}
        }

[KroMignon]

@Yunus Hello, it is simple, define a property for the fill color and listen on it changes:

Canvas {
    id: mycanvas
    width: 300
    height: 300                            
    property real lastX
    property real lastY
    property color fillColor: "blue"
    onFillColorChanged: requestPaint();
    onPaint: {
        var ctx = getContext("2d");                            
        ctx.fillStyle = "blue";                                 
        lastX = painter_object.x+painter_object.width/2
        lastY = painter_object.y+painter_object.width/2
        ctx.fillRect(painter_object.x, painter_object.y, painter_object.width, painter_object.width);
        ctx.fill()
        ctx.stroke();
    }
}

Now, you just have to change the fillColor property to redraw the canvas

[J.Hilk]

to add to @KroMignon
If you do not call ctx.reset() at the beginning of your onPaint event, you'll draw over the old stuff. That will cause problems, if you draw something with alpha component.

So keep that in mind

[Yunus]

@KroMignon Thanks for ur reply. But when I tried ur code, color of rectangles is changing. But its not updating the previous painted rectangles with the current color. It is only changing the colors of future rectangles.

[Yunus]

@J-Hilk Thanks for ur advice. But my problem is with old stuff :). I want to change the color of old stuff

[J.Hilk]

@Yunus than you'll have to call reset() and redraw the old image/structure with the new color

[Yunus]

@J-Hilk Is there a way to redraw with automatically by the program?

[Yunus]

Can I assign the coordinates of painted rectangles to an array then draw these rectangles again? Can this be a solution?

[J.Hilk]

@Yunus

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.2

Window {
    visible: true
    width: 100
    height: 100
    title: qsTr("Hello World")

    id:window

    Item{
        id:myItem
        anchors.fill: parent

        property int iteration: 0
        onIterationChanged: myCanvas.requestPaint()
        Timer{
            id: tRedraw
            interval: 20
            repeat: true
            running: true
            onTriggered: {
                myItem.iteration++
                if(myItem.iteration > window.width)
                    myItem.iteration = 0
            }
        }

        property var colors: ["blue", "red", "yellow", "green"]

        Canvas{
            id:myCanvas
            anchors.fill: parent

            onPaint:{
                var ctx = getContext("2d");
               ctx.fillStyle = myItem.colors[(myItem.iteration % 4)];
               ctx.fillRect(myItem.iteration, myItem.iteration, window.width - (myItem.iteration * 2), window.height - (myItem.iteration * 2));
               ctx.fill()
               ctx.stroke();
            }
        }
    }
}

[Yunus]

@J-Hilk I still dont think this is a solution for me or I am thinking wrongly. Let me be more clear. I have an image which is painted with blue rectangles. After the painting process, I want to press a button and want these blue painted rectangles to change to a different color. Image is below:

[J.Hilk]

@Yunus well, no drawn is drawn.

You can however save the rectangles, those that you draw, in an array. And when you want to change the color you clear the canvas (reset()) and paint them all anew from that array, but with a different color

[Yunus]

@J-Hilk If it seems the only solution, I ll try it, Thanks again

[Yunus]

@Yunus I solved my problem by assigning painted rectangles's points to array and redrawing them.