Qt Quick Examples - Canvas

This is a collection of QML Canvas examples.

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

Red heart demonstrates using a bezierCurve 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 demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble:

ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.closePath();

This example also demonstrates the fillText API:

ctx.fillStyle = "white";
ctx.font = "Bold 17px";
ctx.fillText("Qt Quick", 40, 70);

Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle.

Rounded rectangle demonstrates using a collection if lineTo/arcTo path APIs to draw a rounded rectangle.

Smile face demonstrates using several complex path APIs to draw an fill a smile face.

Clip demonstrates using clip API to clip a given image.

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

Tiger demonstrates using 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();
    }
}

Files: