Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › How to scale images on canvas

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #24254



    I created a canvas which loads an image I can use to draw on. Unfortunately the image quality is very bad. How can I use the original resolution on my canvas?

    I use PinchArea to scale and drage the image/canvas. But then the “thumbnail” is scaled and you can see the bad quality. The original image has a resolution of 300 dpi. So it should be displayed in top quality.

    Here is my code:

    import Felgo 3.0
    import QtQuick 2.11
    import "../common"
    * Show paint area
    Page {
        id: drawingsPage
        title: "Drawings page"
        property string paintColor: "#000000"
        property string ticketId: ""
        property string projectId: ""
        property string filePath: "file:///var/mobile/Containers/Data/Application/063D1917-6A5A-41F4-BF57-0560F33E1322/Library/Application Support/Felgo Live Client/_packages/60640c364fc28.jpg"
        property var media
        property bool drawMode: false
        Rectangle {
            id: topRow
            z: 100
            width: parent.width;
            height: 65;
            color: "#333333"
            Row {
                id: colorTools
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    top: parent.top
                    topMargin: 8
                // Save image
                AppButton {
                    id: buttonPinch
                    text: "Drawing mode"
                    iconLeft: IconType.pencil
                    iconSize: dp(32)
                    textColor: "white"
                    onClicked: {
                        drawMode = pinchArea.enabled
                        pinchArea.enabled = !pinchArea.enabled
                        console.log("Pincharea enabled: " + pinchArea.enabled)
                        console.log("DrawMode: " + drawMode)
                        textColor = drawMode ? "orange" : "white"
                // reset drawing
                AppButton {
                    id: buttonReset
                    text: "reset"
                    iconLeft: IconType.undo
                    iconSize: dp(32)
                    textColor: "white"
                    onClicked: {
                        mycanvas.resetDraw = true
                // Colors
                //property variant activeSquare: red
                property color paintColor: "#33B5E5"
                spacing: 4
                Repeater {
                    model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]
                    ColorSquare {
                        id: red
                        color: modelData
                        active: drawingsPage.paintColor == color
                        onClicked: {
                            drawingsPage.paintColor = color
                // Save drawing
                AppButton {
                    id: buttonSave
                    text: "Save"
                    iconLeft: IconType.save
                    iconSize: dp(32)
                    textColor: "white"
                    onClicked: {
                        var justFileName = fileUtils.cropPathAndKeepFilename(media.MEDIA_FILE_NAME, true)
                        NativeDialog.inputText("Save drawing", "Please enter filename", "filename: ", "", function(ok, text) {
                            if(ok) {
                                var fName = text + ".jpg"
                                var timestamp = new Date().getTime()
                                var fPath = fileUtils.storageLocation(FileUtils.AppDataLocation) + "_packages/" + timestamp + ".jpg";
                                if(mycanvas.save(fPath)) {
                                    console.log("file saved!")
                                else {
                                    console.log("Couldn't save file!")
                // Zeichnung speichern
                AppButton {
                    id: buttonClose
                    text: "Close"
                    iconLeft: IconType.close
                    iconSize: dp(32)
                    textColor: "white"
                    onClicked: {
        // Drawings area
        Canvas {
            id: mycanvas
            property bool firstdraw: false
            property string imagefile: filePath
            property real lastX
            property real lastY
            property bool resetDraw: false
            property color color: drawingsPage.paintColor //colorTools.paintColor
            y: topRow.height
            width: parent.width
            height: parent.height - topRow.height
            Component.onCompleted: {
            onImageLoaded: {
                firstdraw = true
            onPaint: {
                var ctx = getContext("2d")
                var ctxImg = getContext("2d")
                if(resetDraw) {
                    ctx.clearRect(0, 0, mycanvas.width, mycanvas.height)
                    pinchArea.scale = 1.0
                    console.log("Context geleert")
                // Draw image only once
                if(firstdraw || resetDraw) {
                    ctxImg.scale(pinchArea.scale, pinchArea.scale);
                    var imgData = ctxImg.createImageData(mycanvas.imagefile)
                    ctxImg.drawImage(imgData, 0, 0, imgData.width, imgData.height, 0, 0, mycanvas.width, mycanvas.height)
                    firstdraw = false
                    resetDraw = false
                // Drawings
                if(drawingsPage.drawMode === true) {
                    ctx.lineWidth = 3
                    ctx.strokeStyle = mycanvas.color
                    ctx.moveTo(lastX, lastY)
                    lastX = area.mouseX * pinchArea.scale
                    lastY = area.mouseY * pinchArea.scale
                    ctx.lineTo(lastX, lastY)
            MouseArea {
                id: area
                anchors.fill: parent
                onPressed: {
                    mycanvas.lastX = mouseX * pinchArea.scale
                    mycanvas.lastY = mouseY * pinchArea.scale
                onPositionChanged: {
        // Zoom and drag
        PinchArea {
            width: mycanvas.width
            height: mycanvas.height
            pinch.minimumScale: 0.2
            pinch.maximumScale: 5.0
            pinch.dragAxis: Pinch.XAndYAxis

    Hope someone can help.



    Felgo Team

    Hi Martin,

    without a deeper look in your code, what about scaling the Canvas itself (using transform: Scale { ... } and set width/height accordingly)? Then the Canvas “offers more pixels” to draw a higher quality image onto.

    If you can provide a minimal runnable example (also including an App root) it would also be easier to directly try your code and mess around with it.




    Hi Alex,

    basically I just want to see an high resolution image on my canvas. But all I get is a very poor quality image. I think it depends on the provided “number of pixels” of the canvas. So how can I get more pixels?



    Felgo Team

    As suggested, by icreasing the canvas size and scaling it down proportionally, would be an the most obvious option that crosses my mind. We are using similar techniques for certain Scene scaling mechanisms of game components.




    Ah, now I understand how it’s working. Thank you.

    One last point: I couldn’t find how to center my view on the middle of the canvas. Can you give me a hint?

    Thank you very much


    Felgo Team

    Hm I am not sure if I can fully follow you there. Is this about centering the image in the canvas? You could make the canvas size follow the image size and rather center the canvas itself?


Viewing 6 posts - 1 through 6 (of 6 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded