How to remove drawn elements on the canvas?

86 views
Skip to first unread message

membersound

unread,
Jan 20, 2013, 3:01:39 PM1/20/13
to google-we...@googlegroups.com
Hi,

I draw ellipses on a canvas on click, and want to remove them on doubleclick.
Therefor I track them in a list with coordinates tracked, and iterate if on mouseclick. I'm already detecting if an element is under mouseclick or not.

BUT: how do I remove that element from the canvas? Would I have to remove it from my list, then clear and redraw the whole canvas?
Can't I just somehow "clear" the ellipse selected?

ashwin....@gmail.com

unread,
Jan 20, 2013, 9:43:05 PM1/20/13
to google-we...@googlegroups.com
easiest way to clear a canvas is to use the context clearRect function and pass the canvas co-ordinate space width & height. This would clear the entire canvas. And you can redraw the shapes you want to remain on screen.

You can also clear portion of a screen, using the above function by passing the position and size of the ellipse you draw but if there are multiple shapes in that position then they would also get erased, you will have to manage redrawing them. 

check out the canvas sample in gwt-examples, it gives a very good demo of how to use front and back canvas for complex rendering. Using this technique gives you smooth graphics and also better performance. 




--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/kAQ-dtNuGz4J.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Kody

unread,
Jan 21, 2013, 8:31:22 AM1/21/13
to google-we...@googlegroups.com
Followed your suggestion using front and drag/back-canvas. Works really nice.

If someone else is looking for this: you can dublicate a canvas just by:
desintationCanvas.getCtx().drawImage(sourceCanvas.getCanvasElement(), 0, 0);

Don't create an image from the source canvas to draw it on the destination, this will take too much time and resources!

ashwin....@gmail.com

unread,
Jan 21, 2013, 8:50:26 AM1/21/13
to google-we...@googlegroups.com
great. let me know if you need more details on the same. I have implemented panning and zooming as well for one of my projects

regards
Ashwin


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Kody

unread,
Jan 23, 2013, 6:40:30 AM1/23/13
to google-we...@googlegroups.com
Great, yes I'd definitely would love to have some input on this! Looking forward to your response as I'm also thinking bout building some pan/zoom lateron.

Dean S. Jones

unread,
Jan 24, 2013, 8:40:29 AM1/24/13
to google-we...@googlegroups.com
You could always have a look at our Canvas toolkit


Pan/Zoom will be in 1.1, out by the end of the month....
Reply all
Reply to author
Forward
0 new messages