Repainting a canvas - clear or create new object?

[membersound]

Hi,

when a Canvas is often cleared and redrawn (for example during a drag and drop action): would it be better to call ctx.clearRect(0, 0, clientWidth(), clientHeight())?
Or just create a new Canvas by Canvas.createIfSupported() and replace the currently drawn canvas by the new one?

Thanks

[Thad]

Without timing this, I can't say for sure. However I suspect ctx.clearRect(0, 0, clientWidth(), clientHeight()) is faster as it calls clearRect on the JavaScriptObject while creating a new Canvas requires the DOM to create a new object.

[David Durham]

There's a trick where you layer Canvas elements on top of each other, because you don't necessarily want to redraw everything, only what's changed.  I have an example (though no source code available yet):

http://gdldemo.appspot.com/

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Kody]

Isn't this what I'm doing if I save everything that is not dragged to an image an draw this static image behind the drag context?
If not, could you be more specific?

2013/4/9 David Durham <david.d...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/MXGRDjc6toQ/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[membersound]

How do you stack multiple canvas onto each other?
I tried the following, which only placed them below each other so that both are visible at a time.

        .layer1 {
            z-index: 1;
            left: 0;
            top: 0;
        }
        .layer2 {
            z-index: 0;
            left: 0;
            top: 0;
        }

                <gwt:AbsolutePanel>
                    <c:Canvas styleName="{style.layer1}" />
                    <c:Canvas styleName="{style.layer2}" />
                </gwt:AbsolutePanel>

[Thad]

If you don't want the lower layer to show through, you need to fill the upper layer with an opaque (alpha 1.0) color.

The transparency of canvas is a good think at least for one of my apps. I have three Canvas, all stacked in an AbsolutePanel. The lowest Canvas holds an image (a PNG that was converted on the server from a scanned TIFF). The next layer holds objects the user has drawn on the Canvas. The top-most layer is the interactive drawing layer, where I track mouse down, move, and up. (There's also a fourth Canvas that is not on screen. I use this for testing if clicks on the AbsolutePanel are clicks on a current object.)

[Kody]

Could you post the code where you stack the layers?
Because as I wrote in, my 2 canvsa layers appear one below the other, not behind each other!

So both layers are visible at a time. What's wrong with the code example I posted?

2013/4/10 Thad <thad.hu...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/MXGRDjc6toQ/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[Thad]

Sorry if my terminology is confusing. My Cavases are stacked--as in their z-indexes place one on the other (http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index)--and are visible at the same time as the Canvas is a transparent object.

As I said before, if you don't want the lower layer to show through, you need to fill the upper layer with an opaque (alpha 1.0) color.

Alternately I guess you could set style="display: none" for the Canvas you don't want showing at that moment (though I've not tried this; in my app, I want all Canvas layers to show).

2013/4/10 Thad <thad.hu...@gmail.com>

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

[Kody]

I totally understand you: your final image is composed of different canvas layers, that's also what I'd like to have.

My problem is, that my canvases like in the code above are place BELOW each other. Which means: layer2 does NOT show at position 0,0. But starts where layer1 ends. Thus something must be wrong with my code...?

2013/4/11 Thad <thad.hu...@gmail.com>

To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[Thad]

Oh, I think I see your point now. Maybe--and this is a guess--is that you're attaching the style to the Canvases and the AbsolutePanel doesn't see it? (Does Firebug or some similar tool offer any clues?)

I don't use a style sheet to control positioning items in an AbsolutePanel. In UiBinder I use the <g:at> element, as in the JavaDoc example:

 <g:AbsolutePanel>
   <g:at left='10' top='20'>
     <g:Label>Lorem ipsum...</g:Label>
   </g:at>
   <g:Label>...dolores est.</g:Label>
 </g:AbsolutePanel>

http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/AbsolutePanel.html  (Unlike this example, I always position widgets.)

When I add widgets to and AbsolutePanel via code (and not UiBinder), I put them in bottom to top:

    // layer the canvases onto a panel

    imagePanel.clear();

    imagePanel.add(imagePlane, IMAGE_PADDING, IMAGE_PADDING);  // my fixed image

    imagePanel.add(areasPlane, IMAGE_PADDING, IMAGE_PADDING);   // previously drawn objects

    imagePanel.add(canvas, IMAGE_PADDING, IMAGE_PADDING);         // the active drawing canvas

2013/4/11 Thad <thad.hu...@gmail.com>

2013/4/10 Thad <thad.hu...@gmail.com>

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsubscribe@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Dean S. Jones]

Well, you could save yourself a bit of work and take a look at Lienzo

http://www.emitrom.com/lienzo

/open-source-public-service-announcement-only ;-)

On Wednesday, April 3, 2013 10:13:34 AM UTC-4, membersound wrote: