Apply gradient to drawn figure

Question

I have this MWE code here which is drawing a triangle with a set color:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

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

    Rectangle
    {
        id: rectMain
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "white"

        Canvas
        {
            anchors.fill: parent

            // set properties with default values
            property real hFactor: 1    // height factor
            property real trbase: 200
            property color strokeColor: "black"
            property color fillColor: "yellow"
            property int lineWidth: 1
            property real alpha: 1
            property real rotAngle: 0
            property real parentWidth: parent.width; // try
            property real parentHeight: parent.height;

            onStrokeColorChanged: requestPaint();
            onFillColorChanged: requestPaint();
            onLineWidthChanged: requestPaint();

            onPaint:
            {
                hFactor = Math.abs(hFactor)

                var ctx = getContext("2d") // get context to draw with
                ctx.clearRect(0, 0, width, height); // remove what is painted so far
                ctx.lineWidth = lineWidth
                ctx.strokeStyle = strokeColor
                ctx.fillStyle = fillColor
                ctx.globalAlpha = alpha

                ctx.save();
                ctx.beginPath();
                ctx.translate(parentWidth / 2, parentHeight / 2);
                ctx.rotate((Math.PI / 180) * rotAngle);
                ctx.moveTo(0, 0);

                // drawing part, first calculate height using Pythagoras equation
                var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2));
                trheight = trheight * hFactor;
                var hfBase = trbase * hFactor;
                ctx.lineTo(hfBase / -2, trheight); // left arm
                ctx.lineTo(hfBase / 2, trheight); // right arm

                ctx.closePath(); // base drawn automatically
                ctx.fill();
                ctx.stroke();
                ctx.restore();
            }
        }
    }
}

I am trying to figure out how to apply gradient to this code, so having 2 colors (for example yellow and red) the triangle would gradient from the first to the other like this (edited in paint):

I tried using Gradient object from the documentation here: https://doc.qt.io/qt-5/qml-qtquick-gradient.html but with no success.

Answer 1

createLinearGradient method is used to draw gradient on canvas. Just create a gradient using this method, add colors of gradient and finally assign it to fillStyle.

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

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

    Rectangle
    {
        id: rectMain
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "white"

        Canvas
        {
            anchors.fill: parent

            // set properties with default values
            property real hFactor: 1    // height factor
            property real trbase: 200
            property color strokeColor: "black"
            property color fillColor: "yellow"
            property int lineWidth: 1
            property real alpha: 1
            property real rotAngle: 0
            property real parentWidth: parent.width; // try
            property real parentHeight: parent.height;

            onStrokeColorChanged: requestPaint();
            onFillColorChanged: requestPaint();
            onLineWidthChanged: requestPaint();

            onPaint:
            {
                hFactor = Math.abs(hFactor)

                var ctx = getContext("2d") // get context to draw with
                ctx.clearRect(0, 0, width, height); // remove what is painted so far
                ctx.lineWidth = lineWidth
                ctx.strokeStyle = strokeColor

                // create a gradient
                var gradient = ctx.createLinearGradient(100,0,100,200)
                        gradient.addColorStop(0, "yellow")
                        gradient.addColorStop(1, "red")



                ctx.fillStyle = gradient // assign gradient
                ctx.globalAlpha = alpha

                ctx.save();
                ctx.beginPath();
                ctx.translate(parentWidth / 2, parentHeight / 2);
                ctx.rotate((Math.PI / 180) * rotAngle);
                ctx.moveTo(0, 0);

                // drawing part, first calculate height using Pythagoras equation
                var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2));
                trheight = trheight * hFactor;
                var hfBase = trbase * hFactor;
                ctx.lineTo(hfBase / -2, trheight); // left arm
                ctx.lineTo(hfBase / 2, trheight); // right arm

                ctx.closePath(); // base drawn automatically
                ctx.fill();
                ctx.stroke();
                ctx.restore();
            }
        }
    }
}

---

Here is the output

Also check simple example on gradient from QML book.