subject:"\[Interest\] Canvas keeping artifacts"

Re: [Interest] Canvas keeping artifacts

2016-03-25 Thread Jason H



> Sent: Friday, March 25, 2016 at 5:14 AM
> From: "Nikita Krupenko" <krne...@gmail.com>
> To: interest@qt-project.org
> Subject: Re: [Interest] Canvas keeping artifacts
>
> 2016-03-24 15:49 GMT+02:00 Jason H <jh...@gmx.com>:
> > By the way, reset() is not a W3C function, and it's also not in the QML
> > Canvas documentation.
> >
> > I'm wondering how you found it?
> 
> In fact, it is in the doc:
> https://doc.qt.io/qt-5/qml-qtquick-context2d.html#reset-method


Ah, I see what I happened. I read docs for Canvas element, and missed the link 
for "Context2D", which has the info. 
___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Re: [Interest] Canvas keeping artifacts

2016-03-25 Thread Nikita Krupenko

2016-03-24 15:49 GMT+02:00 Jason H :
> By the way, reset() is not a W3C function, and it's also not in the QML
> Canvas documentation.
>
> I'm wondering how you found it?

In fact, it is in the doc:
https://doc.qt.io/qt-5/qml-qtquick-context2d.html#reset-method
___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Re: [Interest] Canvas keeping artifacts

2016-03-24 Thread Jérôme Godbout

reverse engineering of methods on object, we have some debug tools to list
methods and properties on object at run time, kinda what KDAB Gamma Ray is
doing https://www.kdab.com/gammaray/
So I try it out, I remembered having a hard time with the same problems.
The rest are probably left over from previous try and what we are expecting
a Web Canvas would react to.

On Thu, Mar 24, 2016 at 9:49 AM, Jason H <jh...@gmx.com> wrote:

> By the way, reset() is not a W3C function, and it's also not in the QML
> Canvas documentation.
>
> I'm wondering how you found it?
>
>
>
> *Sent:* Thursday, March 24, 2016 at 9:42 AM
> *From:* "Jason H" <jh...@gmx.com>
> *To:* "Jérôme Godbout" <jer...@bodycad.com>
>
> *Cc:* "interest@qt-project.org Interest" <interest@qt-project.org>
> *Subject:* Re: [Interest] Canvas keeping artifacts
> ctx.reset(); fixes it.
>
> Again, I think you have meaningless statements.
> ctx.beginPath(); // It's not a path
> ctx.fillStyle = 'rgba(0,0,0,0)'; // it's not using fillStyle
> ctx.clearRect(0,0,width,height); // this works
> ctx.fill(); // there is no closed path to fill
>
> *Sent:* Wednesday, March 23, 2016 at 6:21 PM
> *From:* "Jérôme Godbout" <jer...@bodycad.com>
> *To:* "Jason H" <jh...@gmx.com>
> *Cc:* "interest@qt-project.org Interest" <interest@qt-project.org>
> *Subject:* Re: [Interest] Canvas keeping artifacts
> Canvas
> {
> id: component
> //...
> renderStrategy: Canvas.Immediate
> renderTarget: Canvas.FramebufferObject
>
> onWidthChanged: requestPaint()
> onHeightChanged: requestPaint()
> onPaint: paintHandler()
>
> function paintHandler()
> {
> var ctx = getContext('2d');
> ctx.reset();
> // clear with transparent
> ctx.beginPath();
> ctx.fillStyle = 'rgba(0,0,0,0)';
> ctx.clearRect(0,0,width,height);
> ctx.fill();
> // Set general style
> ...
> // Call draw functions here
> ...
> }
> }
>
> At a few overhead near, this is what I do, the thing is clear, I guess my
> ctx.reset() is the missing key here, I had problems too with this clear
> thing with Qml Canvas where Html canvas where working perfectly fine with
> the same code.
>
> My guess is that the Widgets try to redraw as little as possible somehow,
> not sure if a replacement to the requestPaint() or a function that will:
> function myRequestPaint()
> {
>   markDirty(Qt.rect(0,0,width,height));
>   requestPaint();
> }
>
> onWidthChanged: myRequestPaint()
> onHeightChanged: myRequestPaint()
>
> Hope this help you out, let me know if the makeDirty() change anything, I
> may change my code for it too.
>
> Jerome
>
> On Wed, Mar 23, 2016 at 5:26 PM, Jason H <jh...@gmx.com> wrote:
>>
>> Thanks for the tip, but a few things:
>> 1. I don't think clearRect uses fillStyle
>> 2. I don't think clearRect needs a fill, as "clear" implies both color
>> and fill op.
>> http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_clearrect
>>
>>
>> I had played with that, including your code, no luck.
>> It looks like the Black Sabbath - Paraoid album cover.
>>
>>
>> *Sent:* Wednesday, March 23, 2016 at 5:11 PM
>> *From:* "Jérôme Godbout" <jer...@bodycad.com>
>> *To:* "Jason H" <jh...@gmx.com>
>> *Cc:* "interest@qt-project.org Interest" <interest@qt-project.org>
>> *Subject:* Re: [Interest] Canvas keeping artifacts
>> You may want to clear fill with blank transparency:
>>
>> ctx.fillStyle = 'rgba(0,0,0,0)';
>> ctx.clearRect(0,0,width,height);
>> ctx.fill();
>>
>> for me it did the trick.
>>
>> On Wed, Mar 23, 2016 at 4:54 PM, Jason H <jh...@gmx.com> wrote:
>>>
>>> I have a very simple pause button:
>>> Canvas {
>>> id: pauseCanvas
>>> anchors.fill: parent
>>> onWidthChanged: requestPaint()
>>> onHeightChanged: requestPaint()
>>> onPaint: {
>>> var ctx = getContext('2d');
>>> ctx.save()
>>> ctx.clearRect(0,0, width,height)
>>> ctx.fillStyle = color;
>>> ctx.rect(0.125*width, 0.05*height, 0.25*width,
>>> 0.90*height);
>>> ctx.fill();
>>> ctx.rect(0.625*width, 0.05*height, 0.25*width,
>>> 0.90*height);
>

Re: [Interest] Canvas keeping artifacts

2016-03-24 Thread Jason H


By the way, reset() is not a W3C function, and it's also not in the QML Canvas documentation.

 

I'm wondering how you found it?

 

 

 

Sent: Thursday, March 24, 2016 at 9:42 AM
From: "Jason H" <jh...@gmx.com>
To: "Jérôme Godbout" <jer...@bodycad.com>
Cc: "interest@qt-project.org Interest" <interest@qt-project.org>
Subject: Re: [Interest] Canvas keeping artifacts




ctx.reset(); fixes it.

 


Again, I think you have meaningless statements.


ctx.beginPath(); // It's not a path

ctx.fillStyle = 'rgba(0,0,0,0)'; // it's not using fillStyle

ctx.clearRect(0,0,width,height); // this works

ctx.fill(); // there is no closed path to fill

 



Sent: Wednesday, March 23, 2016 at 6:21 PM
From: "Jérôme Godbout" <jer...@bodycad.com>
To: "Jason H" <jh...@gmx.com>
Cc: "interest@qt-project.org Interest" <interest@qt-project.org>
Subject: Re: [Interest] Canvas keeping artifacts


Canvas
{

        id: component

        //...


        renderStrategy: Canvas.Immediate

        renderTarget: Canvas.FramebufferObject


 

        onWidthChanged: requestPaint()
        onHeightChanged: requestPaint()


        onPaint: paintHandler()

 


        function paintHandler()

{

var ctx = getContext('2d');

ctx.reset();

// clear with transparent

ctx.beginPath();

ctx.fillStyle = 'rgba(0,0,0,0)';

ctx.clearRect(0,0,width,height);

ctx.fill();

// Set general style

                ...

// Call draw functions here

...

}


}


 

At a few overhead near, this is what I do, the thing is clear, I guess my ctx.reset() is the missing key here, I had problems too with this clear thing with Qml Canvas where Html canvas where working perfectly fine with the same code.

 

My guess is that the Widgets try to redraw as little as possible somehow, not sure if a replacement to the requestPaint() or a function that will:

function myRequestPaint()

{

      markDirty(Qt.rect(0,0,width,height));

      requestPaint();

}

 


onWidthChanged: myRequestPaint()
onHeightChanged: myRequestPaint()

 

Hope this help you out, let me know if the makeDirty() change anything, I may change my code for it too.

 

Jerome


 
On Wed, Mar 23, 2016 at 5:26 PM, Jason H <jh...@gmx.com> wrote:





Thanks for the tip, but a few things:

1. I don't think clearRect uses fillStyle

2. I don't think clearRect needs a fill, as "clear" implies both color and fill op. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_clearrect

 

 

I had played with that, including your code, no luck.

It looks like the Black Sabbath - Paraoid album cover. 

 

 

Sent: Wednesday, March 23, 2016 at 5:11 PM
From: "Jérôme Godbout" <jer...@bodycad.com>
To: "Jason H" <jh...@gmx.com>
Cc: "interest@qt-project.org Interest" <interest@qt-project.org>
Subject: Re: [Interest] Canvas keeping artifacts




You may want to clear fill with blank transparency:

 

ctx.fillStyle = 'rgba(0,0,0,0)';

ctx.clearRect(0,0,width,height);

ctx.fill();


 

for me it did the trick.


 
On Wed, Mar 23, 2016 at 4:54 PM, Jason H <jh...@gmx.com> wrote:

I have a very simple pause button:
        Canvas {
                id: pauseCanvas
                anchors.fill: parent
                onWidthChanged: requestPaint()
                onHeightChanged: requestPaint()
                onPaint: {
                        var ctx = getContext('2d');
                        ctx.save()
                        ctx.clearRect(0,0, width,height)
                        ctx.fillStyle = color;
                        ctx.rect(0.125*width, 0.05*height, 0.25*width, 0.90*height);
                        ctx.fill();
                        ctx.rect(0.625*width, 0.05*height, 0.25*width, 0.90*height);
                        ctx.fill();
                        ctx.restore();
                }
        }

The problem is when I resize the window (which in turn resizes the canvas), I get artifacts of previous draws. If the window is made larger (corner drag or maximize) I can see the smaller original rectangles. And vice-versa.

How can I get Canvas to play nice?


___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest


















___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest



___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Re: [Interest] Canvas keeping artifacts

2016-03-24 Thread Jason H


ctx.reset(); fixes it.

 


Again, I think you have meaningless statements.


ctx.beginPath(); // It's not a path

ctx.fillStyle = 'rgba(0,0,0,0)'; // it's not using fillStyle

ctx.clearRect(0,0,width,height); // this works

ctx.fill(); // there is no closed path to fill

 



Sent: Wednesday, March 23, 2016 at 6:21 PM
From: "Jérôme Godbout" <jer...@bodycad.com>
To: "Jason H" <jh...@gmx.com>
Cc: "interest@qt-project.org Interest" <interest@qt-project.org>
Subject: Re: [Interest] Canvas keeping artifacts


Canvas
{

        id: component

        //...


        renderStrategy: Canvas.Immediate

        renderTarget: Canvas.FramebufferObject


 

        onWidthChanged: requestPaint()
        onHeightChanged: requestPaint()


        onPaint: paintHandler()

 


        function paintHandler()

{

var ctx = getContext('2d');

ctx.reset();

// clear with transparent

ctx.beginPath();

ctx.fillStyle = 'rgba(0,0,0,0)';

ctx.clearRect(0,0,width,height);

ctx.fill();

// Set general style

                ...

// Call draw functions here

...

}


}


 

At a few overhead near, this is what I do, the thing is clear, I guess my ctx.reset() is the missing key here, I had problems too with this clear thing with Qml Canvas where Html canvas where working perfectly fine with the same code.

 

My guess is that the Widgets try to redraw as little as possible somehow, not sure if a replacement to the requestPaint() or a function that will:

function myRequestPaint()

{

      markDirty(Qt.rect(0,0,width,height));

      requestPaint();

}

 


onWidthChanged: myRequestPaint()
onHeightChanged: myRequestPaint()

 

Hope this help you out, let me know if the makeDirty() change anything, I may change my code for it too.

 

Jerome


 
On Wed, Mar 23, 2016 at 5:26 PM, Jason H <jh...@gmx.com> wrote:





Thanks for the tip, but a few things:

1. I don't think clearRect uses fillStyle

2. I don't think clearRect needs a fill, as "clear" implies both color and fill op. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_clearrect

 

 

I had played with that, including your code, no luck.

It looks like the Black Sabbath - Paraoid album cover. 

 

 

Sent: Wednesday, March 23, 2016 at 5:11 PM
From: "Jérôme Godbout" <jer...@bodycad.com>
To: "Jason H" <jh...@gmx.com>
Cc: "interest@qt-project.org Interest" <interest@qt-project.org>
Subject: Re: [Interest] Canvas keeping artifacts




You may want to clear fill with blank transparency:

 

ctx.fillStyle = 'rgba(0,0,0,0)';

ctx.clearRect(0,0,width,height);

ctx.fill();


 

for me it did the trick.


 
On Wed, Mar 23, 2016 at 4:54 PM, Jason H <jh...@gmx.com> wrote:

I have a very simple pause button:
        Canvas {
                id: pauseCanvas
                anchors.fill: parent
                onWidthChanged: requestPaint()
                onHeightChanged: requestPaint()
                onPaint: {
                        var ctx = getContext('2d');
                        ctx.save()
                        ctx.clearRect(0,0, width,height)
                        ctx.fillStyle = color;
                        ctx.rect(0.125*width, 0.05*height, 0.25*width, 0.90*height);
                        ctx.fill();
                        ctx.rect(0.625*width, 0.05*height, 0.25*width, 0.90*height);
                        ctx.fill();
                        ctx.restore();
                }
        }

The problem is when I resize the window (which in turn resizes the canvas), I get artifacts of previous draws. If the window is made larger (corner drag or maximize) I can see the smaller original rectangles. And vice-versa.

How can I get Canvas to play nice?


___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

















___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Re: [Interest] Canvas keeping artifacts

2016-03-23 Thread Jason H


Thanks for the tip, but a few things:

1. I don't think clearRect uses fillStyle

2. I don't think clearRect needs a fill, as "clear" implies both color and fill op. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_clearrect

 

 

I had played with that, including your code, no luck.

It looks like the Black Sabbath - Paraoid album cover. 

 

 

Sent: Wednesday, March 23, 2016 at 5:11 PM
From: "Jérôme Godbout" <jer...@bodycad.com>
To: "Jason H" <jh...@gmx.com>
Cc: "interest@qt-project.org Interest" <interest@qt-project.org>
Subject: Re: [Interest] Canvas keeping artifacts


You may want to clear fill with blank transparency:

 

ctx.fillStyle = 'rgba(0,0,0,0)';

ctx.clearRect(0,0,width,height);

ctx.fill();


 

for me it did the trick.


 
On Wed, Mar 23, 2016 at 4:54 PM, Jason H <jh...@gmx.com> wrote:

I have a very simple pause button:
        Canvas {
                id: pauseCanvas
                anchors.fill: parent
                onWidthChanged: requestPaint()
                onHeightChanged: requestPaint()
                onPaint: {
                        var ctx = getContext('2d');
                        ctx.save()
                        ctx.clearRect(0,0, width,height)
                        ctx.fillStyle = color;
                        ctx.rect(0.125*width, 0.05*height, 0.25*width, 0.90*height);
                        ctx.fill();
                        ctx.rect(0.625*width, 0.05*height, 0.25*width, 0.90*height);
                        ctx.fill();
                        ctx.restore();
                }
        }

The problem is when I resize the window (which in turn resizes the canvas), I get artifacts of previous draws. If the window is made larger (corner drag or maximize) I can see the smaller original rectangles. And vice-versa.

How can I get Canvas to play nice?


___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest






___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Re: [Interest] Canvas keeping artifacts

2016-03-23 Thread Jérôme Godbout

You may want to clear fill with blank transparency:

ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.clearRect(0,0,width,height);
ctx.fill();

for me it did the trick.

On Wed, Mar 23, 2016 at 4:54 PM, Jason H  wrote:

> I have a very simple pause button:
> Canvas {
> id: pauseCanvas
> anchors.fill: parent
> onWidthChanged: requestPaint()
> onHeightChanged: requestPaint()
> onPaint: {
> var ctx = getContext('2d');
> ctx.save()
> ctx.clearRect(0,0, width,height)
> ctx.fillStyle = color;
> ctx.rect(0.125*width, 0.05*height, 0.25*width,
> 0.90*height);
> ctx.fill();
> ctx.rect(0.625*width, 0.05*height, 0.25*width,
> 0.90*height);
> ctx.fill();
> ctx.restore();
> }
> }
>
> The problem is when I resize the window (which in turn resizes the
> canvas), I get artifacts of previous draws. If the window is made larger
> (corner drag or maximize) I can see the smaller original rectangles. And
> vice-versa.
>
> How can I get Canvas to play nice?
>
>
> ___
> Interest mailing list
> Interest@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

[Interest] Canvas keeping artifacts

2016-03-23 Thread Jason H

I have a very simple pause button:
Canvas {
id: pauseCanvas
anchors.fill: parent
onWidthChanged: requestPaint()
onHeightChanged: requestPaint()
onPaint: {
var ctx = getContext('2d');
ctx.save()
ctx.clearRect(0,0, width,height)
ctx.fillStyle = color;
ctx.rect(0.125*width, 0.05*height, 0.25*width, 
0.90*height);
ctx.fill();
ctx.rect(0.625*width, 0.05*height, 0.25*width, 
0.90*height);
ctx.fill();
ctx.restore();
}
}

The problem is when I resize the window (which in turn resizes the canvas), I 
get artifacts of previous draws. If the window is made larger (corner drag or 
maximize) I can see the smaller original rectangles. And vice-versa. 

How can I get Canvas to play nice?


___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Re: [Interest] Canvas keeping artifacts

Re: [Interest] Canvas keeping artifacts

Re: [Interest] Canvas keeping artifacts

Re: [Interest] Canvas keeping artifacts

Re: [Interest] Canvas keeping artifacts

Re: [Interest] Canvas keeping artifacts

Re: [Interest] Canvas keeping artifacts

[Interest] Canvas keeping artifacts

8 matches

Site Navigation

Mail list logo

Footer information