[Interest] Canvas keeping artifacts

[Jérôme Godbout]

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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160323/598c6ce4/attachment.html>