# How to design a triangle in qml?

• I want to design a triangle in qml, how this can be done?
Below is a simple example:

Note: I don't want to use image.

• seems like a QML Canvas is what you're looking for

https://doc.qt.io/qt-5/qml-qtquick-canvas.html

• Hi @J-Hilk ,

Thanks for your response but m not getting how to draw a triangle?

• @JasmineSethi
you define a Canvas element, let it fill the parent

and inside the `onPaint` signal you draw your rectangle using HTML5 syntax

``````Rectangle{
width: 400
height:400
color:"black"
Canvas{
anchors.fill:parent

onPaint:{
var context = getContext("2d");

// the triangle
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();

// the fill color
context.fillStyle = "#FFCC00";
context.fill();
}
}
``````

• Thanks for your response but m not getting how to draw a triangle?

A good tutorial (in my eyes) for Canvas with QML can be found here: https://qmlbook.github.io/ch08-canvas/canvas.html

• @J.Hilk

Can we rotate it to the position as shown in image?

• @J.Hilk

Can we rotate it to the position as shown in image?

you have to modify the x and y values to fit your needs

these

``````context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
``````

are just a basic example

• canvas is slow, recommend use QtQuick.Shape

``````
Shape {
width: 200
height: 150
anchors.centerIn: parent
ShapePath {
strokeWidth: 4
strokeColor: "red"
x1: 20; y1: 20
x2: 180; y2: 130
GradientStop { position: 0; color: "blue" }
GradientStop { position: 0.2; color: "green" }
GradientStop { position: 0.4; color: "red" }
GradientStop { position: 0.6; color: "yellow" }
GradientStop { position: 1; color: "cyan" }
}
strokeStyle: ShapePath.DashLine
dashPattern: [ 1, 4 ]
startX: 20; startY: 20
PathLine { x: 180; y: 130 }
PathLine { x: 20; y: 130 }
PathLine { x: 20; y: 20 }
}
}

``````