Qt Quick Examples - Canvas

This is a collection of QML Canvas examples

This is a collection of QML Canvas examples.

Canvas is a collection of small QML examples relating to the Canvas type. Each example is a small QML file emphasizing a particular type or feature.

Running the Example

To run the example from Qt Creator , open the Welcome mode and select the example from Examples . For more information, visit Building and Running an Example.

Red Heart

Red heart uses the bezier curve API to stroke and fill a red heart.

ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.closePath();

Talk Bubble

Talk bubble uses the quadraticCurveTo() API to stroke and fill a customized talk bubble:

<Code snippet "canvas/quadraticCurveTo/quadraticCurveTo.qml:0" not found>

This example also demonstrates the fillText() API:

<Code snippet "canvas/quadraticCurveTo/quadraticCurveTo.qml:1" not found>

Squircle

Squircle uses a collection of simple moveTo() and lineTo() path APIs to draw a smooth squircle.

Rounded Rectangle

Rounded rectangle uses a collection of lineTo() and arcTo() path APIs to draw a rounded rectangle.

Smile Face

Smile face uses several paths to draw and fill a smiling face.

Clip

Clip uses the clip API to clip a given image.

ctx.clip();
ctx.drawImage(canvas.imagefile, 0, 0);

Tiger

Tiger uses the SVG path API to draw a tiger with a collection of SVG path strings.

for (var i = 0; i < Tiger.tiger.length; i++) {
    if (Tiger.tiger[i].width != undefined)
        ctx.lineWidth = Tiger.tiger[i].width;

    if (Tiger.tiger[i].path != undefined)
        ctx.path = Tiger.tiger[i].path;

    if (Tiger.tiger[i].fill != undefined) {
        ctx.fillStyle = Tiger.tiger[i].fill;
        ctx.fill();
    }

    if (Tiger.tiger[i].stroke != undefined) {
        ctx.strokeStyle = Tiger.tiger[i].stroke;
        ctx.stroke();
    }
}

canvas.qml Example File

bezierCurve.qml Example File

clip.qml Example File

quadraticCurveTo.qml Example File

roundedrect.qml Example File

smile.qml Example File

squircle.qml Example File

tiger.js Example File

tiger.qml Example File

main.cpp Example File

canvas.pro Example File

canvas.qrc Example File

qt-logo.png Image File

squircle.png Image File