GWT support for a canvas widget?

[markww]

Hi,

Is there any GWT support for a canvas object? I want to draw solid
filled shapes into a canvas area.

It seems there are a few third party libraries to do it, but after
reading through feedback here, it seems like they have a good number
of issues with them. Those comments all seem to be from 2007, was
wondering if in the futuristic year of 2008, we've discovered a way to
draw simple shapes etc in a cross browser reliable way?

I'm trying to make a 50 x 50 checkerboard for a game, and was using a
Grid widget, but the creation of the grid alone takes like 15 seconds
when the page loads. Maybe just drawing them via simple line drawing
operations would be a lot faster.

Thanks,
Mark

[George Georgovassilis]

How about a trick?

Load a big DIV and assign a background image as an repeating tile?
This should create the squares, you'd just have to take care of the
x,y coordinates in the mouse events then.

[markww]

Hmm the only problem is that the image is uniquely created on the
client side at runtime. If I could just create a static image in
client memory, then I would be all set, I would just display that
composed image as if it were the real thing (ie. set it as the
background of a div as you suggested). Do any facilities like that
exist in GWT or some reliable javascript library?



On Apr 21, 12:54 am, George Georgovassilis

> > Mark- Hide quoted text -
>
> - Show quoted text -

[George Georgovassilis]

I see. There are some libraries around that have fast grid
implementations, maybe give them a try fist.
If that fails, you could always create a string which represents the
grid you want to make,i.e.

String s = "<table>";
for (int r =0;r < 50; r++){
s = s + "<tr>";
for (int c = 0;c<50;c++)
s = s +"<td id = '"+ r + "_" + c + "'></td>";
s = s + "</tr>";
}
s = s +"</table>";

DOM.setInnerHTML(someWidget.getElement(),s);

And then you can access it via RootElement.getElement("10_5").
Note that the string creation above might be slow in IE, thus you
might have to use a StringBuilder... or do the job once and keep the
generate the String at compile time. Also don't forget the most
favorable option of coding the board as HTML directly into the module
page and playing with the "visible" CSS property.

[markww]

Ok so you're saying that the fastest solution would be to create the
table in the actual html page, then i just modify its colors through
GWT by accessing it via the DOM? I'll give it a try.

Thanks!
Mark

On Apr 21, 1:09 am, "George Georgovassilis"

> >  > - Show quoted text -- Hide quoted text -

[OZ]

On Apr 21, 6:45 am, markww <mar...@gmail.com> wrote:
> Hi,

Greetings!

> Is there any GWT support for a canvas object? I want to draw solid
> filled shapes into a canvas area.

My gwt-canvas implementation might be exactly what you are looking
for, take a look at:

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/6a3ada26fc2d643b/5ca159ad3ad9c419#5ca159ad3ad9c419

To download the widget and/or to check out the demo, visit the project
at:

http://code.google.com/p/gwt-canvas/

> It seems there are a few third party libraries to do it, but after
> reading through feedback here, it seems like they have a good number
> of issues with them. Those comments all seem to be from 2007, was
> wondering if in the futuristic year of 2008, we've discovered a way to
> draw simple shapes etc in a cross browser reliable way?

Well, gwt-canvas went public just recently, so it is very
futuristic ;)

Seriously, I have tested it on IE, Firefox, Opera and Safari and it
works great so far...

> I'm trying to make a 50 x 50 checkerboard for a game, and was using a
> Grid widget, but the creation of the grid alone takes like 15 seconds
> when the page loads. Maybe just drawing them via simple line drawing
> operations would be a lot faster.

Try the canvas demo, it is fast enough :)

> Thanks,
> Mark

[markww]

Hi OZ,

Looks cool, but you need GWT 1.5 M1 right? I took a look, and saw that
M2 was released April 7, but they (google) said it definitely wasn't a
production release yet. I'm a little hesitant to switch to M2 until
it's an approved release - how has your experience with M1 been?
Stable enough? I'm using GWT 1.4, will a lot of the syntax change etc
(much rewriting to do?).

Some other questions if you have a chance - with the canvas
implementation, is IE still using some 'emulated' mode? I read
somewhere that IE will just draw 1 pixel wide divs all over to emulate
the drawing - that sounds like it'd be really slow. Does this canvas
do something better for IE?

Thanks,
Mark

On Apr 21, 6:26 am, OZ <oliver.zo...@gmx-topmail.de> wrote:
> On Apr 21, 6:45 am, markww <mar...@gmail.com> wrote:
>
> > Hi,
>
> Greetings!
>
> > Is there any GWT support for a canvas object? I want to draw solid
> > filled shapes into a canvas area.
>
> My gwt-canvas implementation might be exactly what you are looking
> for, take a look at:
>

> http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...

>
> To download the widget and/or to check out the demo, visit the project
> at:
>
> http://code.google.com/p/gwt-canvas/
>
> > It seems there are a few third party libraries to do it, but after
> > reading through feedback here, it seems like they have a good number
> > of issues with them. Those comments all seem to be from 2007, was
> > wondering if in the futuristic year of 2008, we've discovered a way to
> > draw simple shapes etc in a cross browser reliable way?
>
> Well, gwt-canvas went public just recently, so it is very
> futuristic ;)
>
> Seriously, I have tested it on IE, Firefox, Opera and Safari and it
> works great so far...
>
> > I'm trying to make a 50 x 50 checkerboard for a game, and was using a
> > Grid widget, but the creation of the grid alone takes like 15 seconds
> > when the page loads. Maybe just drawing them via simple line drawing
> > operations would be a lot faster.
>
> Try the canvas demo, it is fast enough :)
>
>
>
> > Thanks,

[markww]

Another question, I don't see any docs associated with your project,
are there any on that page that I'm missing?

In the meantime, I tried downloading the latest GWT incubator to give
that canvas implementation a shot, but I can't find GWTCanvas in the
jar anymore! The docs say it should be at:

com.google.gwt.widgetideas.graphics.client.GWTCanvas;

but even the graphics sub package doesn't exist in the jar! What to
do?

Thanks

> > - Show quoted text -- Hide quoted text -

[OZ]

Hi Mark

On Apr 21, 3:56 pm, markww <mar...@gmail.com> wrote:
> Hi OZ,
>
> Looks cool, but you need GWT 1.5 M1 right? I took a look, and saw that
> M2 was released April 7, but they (google) said it definitely wasn't a
> production release yet. I'm a little hesitant to switch to M2 until
> it's an approved release - how has your experience with M1 been?
> Stable enough? I'm using GWT 1.4, will a lot of the syntax change etc
> (much rewriting to do?).

Well, imo GWT 1.5 M1+M2 are pretty stable, no problems so far and i
really love the Java 5 syntax support, so there is no going back. I
used M1 and M2 and now I use the even more recent "trunk builds". From
a developers perspective I would recommend it, but that really depends
on your requirements.

> Some other questions if you have a chance - with the canvas
> implementation, is IE still using some 'emulated' mode? I read
> somewhere that IE will just draw 1 pixel wide divs all over to emulate
> the drawing - that sounds like it'd be really slow. Does this canvas
> do something better for IE?

Yes and no. It is emulated, but it uses IE's VML. It is still somewhat
slower than the native thing, but not much. If you don't need big
fluid real-time animations, it is pretty fast. The only thing you can
do to speed it up even more is Flash. From a performance point of view
I'd say Safari comes first, Opera second, Firefox third and IE last.

> Thanks,
> Mark

Bye,
Oliver

[markww]

Thanks for the info Oliver. I tried it on Safari and yeah it was
pretty fast!

If you have a moment, can you post like one line on how to import your
canvas implementation and create an instance? I'm assuming it's
something like:

import com.whatever.gwtcanvas;

GWTCanvas canvas = new GWTCanvas();

I just didn't notice any docs on that page on how to use it, so after
I can just import it correctly I'm guessing the functions are gonna be
similar to other graphics drawing APIs,

Thanks,
Mark

[markww]

Ah ok I think this is it:

import gwt.canvas.client.*;
Canvas canvas = new Canvas(200, 200);

If that's not right, please let me know, otherwise, thanks I'm excited
to give this a shot!

Mark

On Apr 21, 11:54 am, OZ <oliver.zo...@gmx-topmail.de> wrote:

[OZ]

On Apr 21, 5:40 pm, markww <mar...@gmail.com> wrote:
> Another question, I don't see any docs associated with your project,
> are there any on that page that I'm missing?

Well, there are no wikis at the moment and I don't know if there is
enough interest either... we'll see

Eclipse (if you are using it) should show you the API documentation
when coding (it is in the source).

If you need a whole canvas tutorial, take a look at:

http://developer.mozilla.org/en/docs/Canvas_tutorial

> In the meantime, I tried downloading the latest GWT incubator to give
> that canvas implementation a shot, but I can't find GWTCanvas in the
> jar anymore! The docs say it should be at:
>
> com.google.gwt.widgetideas.graphics.client.GWTCanvas;
>
> but even the graphics sub package doesn't exist in the jar! What to
> do?
>
> Thanks
>

GWTCanvas does essentially the same thing. Difference is, IE support
is not done that well (Google's excanvas did much better, I know that,
cause I ripped it off :)

You can always check out the Incubator source from SVN:

http://google-web-toolkit-incubator.googlecode.com/svn/trunk/src/com/google/gwt/widgetideas/

(Or just grab the few files by hand)

[markww]

Hi Oliver,

I imported the source files directly into my project for now (still
can't figure out how to import jar files properly). Compilation goes
fine, but trying to create a new Canvas instance fails. Here's the
output I get:

[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError): Object
doesn't support this property or method
message: Object doesn't support this property or method
number: -2146827850
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:
487)
at
com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:
275)
at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:
121)
at com.markww.client.CanvasImpl.init(CanvasImpl.java:43)
at com.markww.client.CanvasImpl.init(CanvasImpl.java:40)
at com.markww.client.Canvas.<init>(Canvas.java:129)

and I'm using it like:

Canvas c = new Canvas(200, 200);

seems to run into trouble right on creation there. I'm using GWT 1.5
M2,

Thanks,
Mark

> http://google-web-toolkit-incubator.googlecode.com/svn/trunk/src/com/...

[markww]

I gave the GWTCanvas class a try from the GWT Incubator project. To
render 200 x 200 filled rects on my laptop, it took:

Internet Explorer 7:
About 5 minutes and you'll get prompted by the browser to stop
since the script is 'making the browser run slowly'.

Firefox:
~2 seconds

iPhone Safari
~2 seconds but quits half way through filling the rects with no
error message being reported.

It would be great to give your (Oliver) project a try since you say
the IE performance is better than the Incubator's implementation,

Thanks,
Mark

On Apr 21, 2:48 pm, markww <mar...@gmail.com> wrote:
> Hi Oliver,
>
> I imported the source files directly into my project for now (still
> can't figure out how to import jar files properly). Compilation goes
> fine, but trying to create a new Canvas instance fails. Here's the
> output I get:
>
> [ERROR] Uncaught exception escaped
> com.google.gwt.core.client.JavaScriptException: (TypeError): Object
> doesn't support this property or method
>  message: Object doesn't support this property or method
>  number: -2146827850
>         at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:
> 487)
>         at
> com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:
> 275)
>         at

> com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.jav­a:

> > (Or just grab the few files by hand)- Hide quoted text -

[markww]

Ok I finally got Oliver's implemenation running in a sample app. It
seems like the speed for internet explorer is somewhat better, but
still slow enough for most users to give up. I tested filling 50 x 50
rects, and it took about ~34 seconds to complete. It's sad because
firefox and even safari on my iphone can do the same thing in under a
second! Why didn't microsoft just implement the canvas in the first
place? Ugh.

Can anyone confirm the speeds listed above? If they're accurate, any
other options? I think I pretty much exhausted all methods except
hardcoding a 50 x 50 table into the module html page then accessing it
via the DOM.

Thanks,
Mark

> > - Show quoted text -- Hide quoted text -

[George Georgovassilis]

You should dump the canvas impl for a different reason: have you
tested which events are implemented? While writing the GWT-WL's canvas
impl I found that browsers serve their canvases with a non-uniform set
of events and you can't be sure which types of events are available on
which platforms.

[markww]

Hi George,

The only event I need is mouse down, I'm hoping that is supported
across the board?

I've been going through various canvas implementations and they all
seem to be painfully slow on IE, except for the raw google excanvas. I
don't think that this is used in any GWT Canvas implementation I've
tried, but it seems to be really fast. Well I did find one actually,
but it doesn't seem to have been touched since 2006 and just doesn't
work after you glue it all together:

http://gwt.components.googlepages.com/canvas

I tried a bunch of work-arounds mainly involving tables, but once I
ramp the table size up to 200 x 200 cells (my worst-case scenario)
I'll see delays of about 1 minute to create the table, then about 15
seconds to change the background color of every cell. That's on my PC,
on my iPhone it just completely craps out.

My obsession with the canvas implementation is that even at 200 x 200
pixels, it only takes about 1 - 2 seconds to fill each pixel. Even on
my iPhone it is pretty quick. Unless I can come up with some other
clever trick to cut down the load time and cell background color set
of a table that big, I'm feeling like I have no choice but to continue
investigating this excanvas thing? These examples using excanvas when
run through IE are pretty impressive:

http://developer.mozilla.org/en/docs/Category:Canvas_examples

and I can't even fill a square quickly! Ha, anyway do you know if any
of these implementations DO use excanvas?

Thanks,
Mark




On Apr 23, 1:22 am, "George Georgovassilis"

[OZ]

Hi Mark & George,

@Mark regarding:

> It would be great to give your (Oliver) project a try since you say
> the IE performance is better than the Incubator's implementation,

Actually I didn't say it has better performance. It is "better" in
terms of a way more accurate output, equal to excanvas. Plus I did not
stress test IE performance that much, the running clock example was
satisfying to me, but of course I had other use cases in mind.

But I'd like to improve IE performance (if possible), so can you post
some of your test sample code that could point me somewhere? What
would be helpful to know is the performance difference between gwt-
canvas and excanvas in your case. Because if that difference is your
problem, one could change the IE implementation of gwt-canvas in a way
that it uses more inline JavaScript code from excanvas. That should at
least come close to the performance of excanvas.

One observation: the translating and scaling examples from my demo use
very long paths (thousands) and IE can do it. Maybe you could try to
use more pathing (beginpath,rect,...,rect,fill,stroke) and less single
rectangles (fillrect,strokerect)?

I think I'll do a little testing myself now....

@George regarding:

> You should dump the canvas impl for a different reason: have you
> tested which events are implemented? While writing the GWT-WL's canvas
> impl I found that browsers serve their canvases with a non-uniform set
> of events and you can't be sure which types of events are available on
> which platforms.

Hm, i didn't notice that. I've implemented the MouseListener,
MouseWheelListener and ClickListener interfaces and they all seemed to
work in IE, Firefox, Opera and Safari...

Bye,
Oliver

[George Georgovassilis]

Hello Oliver

I have not looked at your implementation though it is likely that you followed a better aproach than we did. In particular I found that keyboard events where supported by hardly any browser apart from IE.

[markww]

Hi Oliver,

I tried just using excanvas directly, and the performance there is
lacking for (IE 7). Here's the exact stress test script I'm using (you
can just copy paste this into an html page granted you have the
excanvas javascript file handy), I also put it here so you can try it:

www.markww.com/text_excanvas

WARNING: It will try rendering the 200 x 200 area onPageLoad(), so if
using IE, the page may appear to freeze for a few minutes!

Here's the test script:

<html>
<head>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></
script><![endif]-->
<script type="text/javascript">
var canvas, ctx;

function load() {
canvas = document.getElementById("cv");
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";

var xEnd = 200 - 1;
for (var y = 0; y < 200; y++) {
for (var x = 0; x < xEnd; x++) {
ctx.fillRect (x, y, x+1, y);
}
}
}
</script>
</head>

<body onload="load();">
<canvas id="cv" width="200" height="200"></canvas>
</body>
</html>


I'm not sure what can be done to improve the performance, I don't know
any of the internals. If you think there's any way to improve it I'd
be happy to then explore suggestions, I just don't know where to begin
at this point.

I really wish they would just support the canvas tag like a good
browser!

Thanks,
Mark







On Apr 23, 10:56 am, "George Georgovassilis"

[Peter Blazejewicz]

hi Mark,

GWT has implemented concept of executing heavy code in deffered/
timeline-like based way in IncrementalCommand,
you can use IncrementalCommand to perform heavy part of code that are
related to either parsing data or updating user elements (e.g. dom
manipulation),
That is a command you are looking for, it will improve performance on
IE or at least will make it more user friendly and responsible: you
can show progress bar "building game" when your loop is executing in
IExplore,
http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/com/google/gwt/user/client/IncrementalCommand.html
(and samples on group)

regards,
Peter

> ...
>
> read more »

[markww]

Hi Peter,

I was going to implement something like this, I noticed in the
incubator there's a progress bar widget. I was going to show the user
the progress as the table or canvas is being built.

As for continuing testing, here are some more updates:

1) I tried implementing the 200 x 200 rectangle draw with VML
natively, the performance was better but not by much. Still takes
about 30 seconds to generate, and then the browser stalls when
returning focus.

2) In the excanvas discussion group, it was recommended I try their
silverlight branch. This indeed did improve the performance a lot.
With silverlight and IE 8 beta installed, the 200 x 200 rect draw time
is about 7 seconds, not too bad. Still a far cry from firefox/safari
performance with the <canvas> tag, but better than 2 minutes.

I wonder if the silverlight excanvas branch can be incorporated into
the GWTCanvas widget? Right now I believe it's set to pick up and use
silverlight if detected on the user's machine.

I think in the end though I'm just going to require users to use
firefox or safari or opera for my application, as explorer seems to be
a complete disaster! At least I know that when IE 8 launches, most
users will use silverlight and I guess that will be an ok solution for
those users,

Thanks for any more ideas/comments,
Mark


On Apr 23, 3:28 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:

> hi Mark,
>
> GWT has implemented concept of executing heavy code in deffered/
> timeline-like based way in IncrementalCommand,
> you can use IncrementalCommand to perform heavy part of code that are
> related to either parsing data or updating user elements (e.g. dom
> manipulation),
> That is a command you are looking for, it will improve performance on
> IE or at least will make it more user friendly and responsible: you
> can show progress bar "building game" when your loop is executing in

> IExplore,http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/com/google/g...

> (and samples on group)
>
> regards,
> Peter
>

> > > > > > On Wed, Apr 23, 2008 at 6:47 AM,markww<mar...@gmail.com> wrote:
>
> > > > > > > Ok I finally got Oliver's implemenation running in a sample app. It
> > > > > > > seems like the speed for internet explorer is somewhat better, but
> > > > > > > still slow enough for most users to give up. I tested filling 50 x
> > > > 50
> > > > > > > rects, and it took about ~34 seconds to complete. It's sad because
> > > > > > > firefox and even safari on my iphone can do the same thing in under
> > > > a
> > > > > > > second! Why didn't microsoft just implement the canvas in the first
> > > > > > > place? Ugh.
>
> > > > > > > Can anyone confirm the speeds listed above? If they're accurate,
> > > > any
> > > > > > > other options? I think I pretty much exhausted all methods except
> > > > > > > hardcoding a 50 x 50 table into the module html page then accessing
> > > > it
> > > > > > > via the DOM.
>
> > > > > > > Thanks,
> > > > > > > Mark
>

> > > > > > > On Apr 22, 3:40 pm,markww<mar...@gmail.com> wrote:
> > > > > > > > I gave the GWTCanvas class a try from the GWT Incubator project.
> > > > To
> > > > > > > > render 200 x 200 filled rects on my laptop, it took:
>
> > > > > > > > Internet Explorer 7:
> > > > > > > > About 5 minutes and you'll get prompted by the browser to
> > > > stop
> > > > > > > > since the script is 'making the browser run slowly'.
>
> > > > > > > > Firefox:
> > > > > > > > ~2 seconds
>
> > > > > > > > iPhone Safari
> > > > > > > > ~2 seconds but quits half way through filling the rects with
> > > > no
> > > > > > > > error message being reported.
>
> > > > > > > > It would be great to give your (Oliver) project a try since you
> > > > say
> > > > > > > > the IE performance is better than the Incubator's implementation,
>
> > > > > > > > Thanks,
> > > > > > > > Mark
>

> > > > > > > > On Apr 21, 2:48 pm,markww<mar...@gmail.com> wrote:
>
> > > > > > > > > Hi Oliver,
>
> > > > > > > > > I imported the source files directly into my project for now
> > > > (still
> > > > > > > > > can't figure out how to import jar files properly). Compilation
> > > > goes
> > > > > > > > > fine, but trying to create a new Canvas instance fails. Here's
> > > > the
> > > > > > > > > output I get:
>
> > > > > > > > > [ERROR] Uncaught exception escaped
> > > > > > > > > com.google.gwt.core.client.JavaScriptException: (TypeError):
> > > > Object
> > > > > > > > > doesn't support this property or method
> > > > > > > > > message: Object doesn't support this property or method
> > > > > > > > > number: -2146827850
> > > > > > > > > at
> > > > com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:
> > > > > > > > > 487)
> > > > > > > > > at
>
> > > > com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:
> > > > > > > > > 275)
> > > > > > > > > at
>
> > > > com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.jav ­­��a:
> > > > > > > > > 121)
>

> ...
>
> read more »

[OZ]

Hi Mark,

your test loop is kinda hazardous, I mean:

a) first of all ctx.fillRect (x, y, x, y) should be ctx.fillRect (x,
y, 1, 1) obviously
b) instead of filling each pixel separately you should use paths and
fill them all at once (rect,rect,...,rect,rect,fill)
c) a single rect is composed of four lines - filling pixels should be
done with lines instead of rectangles

I can push 10.000 lines per second in IE (100x100 pixel). But i can't
help myself why do you want to do that? The only reason i can come up
with would be rasterization. But thats not the purpose of the canvas
element, it is suited for vector based tasks. I think with ~300 lines
per image one could have smooth animations in IE, enough for vector
graphics, but rasterization is overkill and not worth the trouble.

I guess you want to do 3d graphics? If so, you don't need
rasterization at all, at least thats not the way to go with the canvas
widget. If you really want to do all the drawing yourself, I'm afraid
you are limited to Flash, Silverlight, Java Applets and the OpenGL ES
context from Firefox 3. But there is no easy GWT integration at the
moment, I think...

Oliver

> ...
>
> read more »

[Glenn]

Hi Oliver -

On Apr 21, 12:09 pm, OZ <oliver.zo...@gmx-topmail.de> wrote:

> On Apr 21, 5:40 pm, markww <mar...@gmail.com> wrote:
>
> > Another question, I don't see any docs associated with your project,
> > are there any on that page that I'm missing?
>
> Well, there are no wikis at the moment and I don't know if there is
> enough interest either... we'll see

I for one am definitely interested. A canvas widget is one thing
sorely
needed. It makes paint programs, custom visualizations, etc. possible.
I look forward to trying out your gwt-canvas.

Before I saw this I was thinking about using the Tatami GWT Dojo
wrapper for the GFX functionality. http://code.google.com/p/tatami
Do you, or any of you other guys, have any experience/thoughts on
tatami?

- Glenn

[markww]

Oliver,

Sorry yes you're right, the sample posted there is wrong, it should
definitely be:

(x, y, 1, 1)

The reason I'd want to be able to draw in this manner is exactly as
Glenn stated, it gives you the ability to make paint programs / image
processing, etc. As far as I know, you really only have two options to
support something like that: Flash, or a Java applet. Not everyone has
flash, and the mobile device browsers don't support it (not yet
anyway). Java applets (in my experience) are horrible at load time -
the user usually thinks the browser just froze etc, even for very
small applets while the applet starts up. Applets also aren't
supported by mobile device browsers (yet). Javascript is nice because
every major browser supports it, even on my iPhone it works great (so
far). If you could write pixels really fast in a canvas with
javascript, you can start doing some really cool things in a cross
browser/cross device way.

As for the right way to fill the rects that are all 1 pixel by 1 pixel
in size, I tried the same thing with drawing a single line per pixel,
and the timing came out the same for me. I wasn't sure which method
would be the fastest, I just tried fillRect() as it seemed somewhat
logical. A problem I see with doing rect,rect,rect,fill, is that the
last fill command fills all the previous paths with the current brush
color, right? For my purposes I'd probably need something more like:

rect(x,y,1,1);
redBrush();
fill();

rect(x + 1,y,1,1);
blueBrush();
fill();

etc for every pixel in the canvas, where each rect is filled with
a different color.

I definitely agree that IE's implementation wasn't made for image
processing. I was just hoping to get away with using it as a stand-in
for some yet to be created browser feature. I'm surprised none of them
have implemented something like <device_context>, which would just be
an area of the browser window you can directly set pixel colors for.
That would be a great addition, at least for what I'm doing!

The <canvas> tag comes pretty close to what I need performance-wise,
like I said on firefox and safari I could do 200 x 200 rects in about
1 second. IE's silverlight contraption still doesn't come close, but
at least it's some improvement speed-wise over their VML stuff. I
doubt any of the browsers will ever implement some directly
addressable pixel block, but it's a nice thought!

Thanks,
Mark

On Apr 24, 9:45 pm, Glenn <glennspho...@gmail.com> wrote:
> Hi Oliver -
>
> On Apr 21, 12:09 pm, OZ <oliver.zo...@gmx-topmail.de> wrote:
>
> > On Apr 21, 5:40 pm, markww <mar...@gmail.com> wrote:
>
> > > Another question, I don't see any docs associated with your project,
> > > are there any on that page that I'm missing?
>
> > Well, there are no wikis at the moment and I don't know if there is
> > enough interest either... we'll see
>
> I for one am definitely interested. A canvas widget is one thing
> sorely
> needed. It makes paint programs, custom visualizations, etc. possible.
> I look forward to trying out your gwt-canvas.
>
> Before I saw this I was thinking about using the Tatami GWT Dojo

> wrapper for the GFX functionality.http://code.google.com/p/tatami

[Thomas]

Hi Glenn,
I need canvas to draw basic shapes and I use tatami GFX, it works
great. One advantage of tatami is it is compatible with GWT 1.4 (I am
waiting for the 1.5 stable release) but on the other hand its license
is LGPL (see http://code.google.com/p/tatami/issues/detail?id=2)
whereas gwt-canvas is Apache License 2.0. gwt-canvas also seems to be
more lightweight (the jar is < 40kb compared to 2.5 MB for tatami),
thanks Oliver for the librairy!
Tom

[OZ]

@Mark

you said it yourself, not a single browser really exposes something
like a raw pixel based context. Even if Safari and Opera are pretty
fast, I still doesn't "feel" right to me, cause you draw pixels with
an vector api that internally has to transform pixel-sized vectors to
real pixels, pretty inefficient (and everything in javascript!). And
by the way, when more browsers are going to implement a 3d canvas
context in the hopefully not too distant future (like opera beta and
firefox beta), all your work would be in vain, because you really
can't compete with hardware acceleration.

Personally I would stick to what the canvas was meant to be, but do as
you like :)

The scaling and translating sample in my demo use a hybrid by the way,
they are composed of thousands of lines, but still not emulating a
pixel block. Thats the real-time canavs limit I think. Another
example, this guy here had a question a supplied some sample code at:

http://groups.google.com/group/gwt-canvas/t/cbcd4fcc73d1b611

Putting the real issue aside, I ran the code and it performed great. A
800x600 canvas drawing real-time graphics on all browser platforms
including IE. Thats where I see the potential of a canvas widget...

Btw: Yes, not everybody has Flash, but that percentage is much, much
lower than the number of IE users you think about excluding from your
approach. So, in your special case I would turn to Flash - there are
already some pretty amazing projects out there:

http://blog.papervision3d.org/ (flash 3d-engine)
http://www.carlosulloa.com/ (demo using it)

@Glenn

What kind of documention and/or wiki would you like to see?

Oliver

[OZ]

Hi Thomas,

thanks for your feedback. The reason why Tatami is so much bigger is
pretty simple: it wraps the entire huge DOJO widget library whereas
gwt-canvas is just one single tiny widget. Thats it.

Oliver

On Apr 25, 10:11 am, Thomas <thomas.lacr...@jouy.inra.fr> wrote:
> Hi Glenn,
> I need canvas to draw basic shapes and I use tatami GFX, it works
> great. One advantage of tatami is it is compatible with GWT 1.4 (I am
> waiting for the 1.5 stable release) but on the other hand its license

> is LGPL (seehttp://code.google.com/p/tatami/issues/detail?id=2)

[OZ]

Took a quick look, they use SVG and emulate it with VML in IE. I've
used a <canvas> + VML. Depends on what you need/like...

[markww]

Oliver,

Thanks again for your comments. I would go with flash, if there were a
way to discern whether the user had it or not at page load time and
switch to it dynamically - my real ultimate goal was to target
iPhones, for which the canvas widget is behaving really nicely. I'm
not going to be doing real-time rasterization, more vector graphics,
but I wanted to test really worst case scenarios / just interested to
see how fast rasterization over the entire canvas would perform.

What would really be neat is a super abstracted canvas which uses
flash if present, otherwise defaults to normal svg/vml - but that's
probably too crazy!

>> And by the way, when more browsers are going to implement a 3d canvas context in the hopefully not too distant future

I would be completely up for going that route once released, but
again, iPhones and other handsets probably won't support that right? I
know google's Android platform has some opengl implementation at
least, I don't know about iPhone/others.

Yeah so in conclusion, I thought about going completely flash because
then my life would be a lot easier, and I could do more fancy stuff,
but then iPhone users and other handset users are completely
eliminated, for which this application would be really fun. Also isn't
flash like $500? If only there were an open source clone of it...

Mark

> > > Tom- Hide quoted text -

[Glenn]

Oliver -

Actually, a wiki is a good idea. You could have a section that only
you edit since you are the authority on your software, and a section
that anyone can edit to add additional examples and use cases.

- Glenn

> http://blog.papervision3d.org/(flash 3d-engine)http://www.carlosulloa.com/(demo using it)

> > > Before I saw this I was thinking about using theTatamiGWT Dojo