[Interest] Canvas keeping artifacts

[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 <jhihn at 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" <jhihn at gmx.com>
> *To:* "Jérôme Godbout" <jerome at bodycad.com>
>
> *Cc:* "interest at qt-project.org Interest" <interest at 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" <jerome at bodycad.com>
> *To:* "Jason H" <jhihn at gmx.com>
> *Cc:* "interest at qt-project.org Interest" <interest at 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 <jhihn at 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" <jerome at bodycad.com>
>> *To:* "Jason H" <jhihn at gmx.com>
>> *Cc:* "interest at qt-project.org Interest" <interest at 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 <jhihn at 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 at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>
>> _______________________________________________ Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160324/5be294b8/attachment.html>