canvas-developers : Messages : 365-394 of 493

Note: if i tell it to draw twice, like this ...

   ctx.drawImage(track.img,-19,-122);      // draw track with offset,
centered around startpoint
   ctx.drawImage(track.img,-19,-122);      // draw track with offset,
centered around startpoint


... it draws correctly. Is this a bug or am i doing something wrong here?

--- In canvas-developers@yahoogroups.com, "Matthew Hagston"
<matthew_hagston@...> wrote:
>
> It's drawing the first piece of track just fine, but when i go to draw
> the second piece of track it only draws a small corner and doesn't
> draw the whole image.
>
> It seems to draw only in the transparent space of the previous image.
> if i remove the 'rotate' code, it draws just fine.
>
> *slams head into desk*
>
>
>
> Using mozilla firefox 2.0.0.2.
>
> image i'm trying to use is located here:
> http://www.hungates.com/images/thomas_track_6.png
>
> any clues or hints to what's causing this?
>
> ---------------------Begin code clip------------------------
> <HTML>
> <HEAD>
> <script type='text/javascript'>
>
> function Track() {
>   this.name = "";
>   this.img = new Image();
>   this.beginX1 = 0;
>   this.beginY1 = 0;
>   this.beginX2 = 0;
>   this.beginY2 = 0;
>   this.endX1 = 0;
>   this.endY1 = 0;
>   this.endX2 = 0;
>   this.endY2 = 0;
>   this.width = 0;
>   this.height = 0;
>   this.id = 0;
>   this.numEnds = 2; // default to 2 end points, max of 4 end points.
> minimum of 1 (bumper track)
>
>   }
> </script>
> <script type='text/javascript'>
>
> function init() {
>
> var ctx = document.getElementById('canvas').getContext('2d');
>     ctx.globalCompositeOperation = 'destination-over';
>
>   track = new Track();
>     track.img.src = "images/thomas_track_6.png";
>     track.name = "6.5 in. Curve Track";
>     track.beginX1 = 19;
>     track.beginY1 = 122;
>     track.endX1 = 74;
>     track.endY1 = 8;
>     track.width = 81;
>     track.height = 132;
>
>   ctx.clearRect(0,0,1000,625);
>   ctx.save();
>   ctx.translate(200,150);     // Set Initial Starting Point of Track
>
>   ctx.drawImage(track.img,0,0, 81, 132);    // Draw 1st Curved Track
Piece
>
>   ctx.translate(73,8);        // move to track endpoint
>       ctx.rotate(0.78525);    // 0.78525 (45 degrees in radians)
>       ctx.drawImage(track.img,-19,-122, 81, 132);  // draw track with
> offset, centered around startpoint
>
>   ctx.restore();
>
>   }
> </script>
> </HEAD>
> <BODY onload='init()' style='margin: 0px; background-color: #eee;'>
>
> <canvas id='canvas' width="1000px" height="625px"></canvas>
>
> </BODY>
> </HTML>
> ---------------------End code clip------------------------
>

#366

From: "mc_murlock" <mbonfils@...>
Date: Mon Mar 19, 2007 10:47 am
Subject: Speed with canvas

mc_murlock

Hi,

I'm trying to use canvas with image (size 1000x800) (using XulRunner).
My aim is to allow user to select part of picture : highlighting the
selection, I'm redrawing canvas at each mouse event if a mouse button
is down.

The code is ok but not very fast (I'm using Windows XP, AMD 2200+),
I've tried the different value of globalCompositeOperation with no
success.

Have you got any tips ?

Thanks,
Michael


The code :

var ctx = canvas.getContext( '2d' );
ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "rgb(0, 0, 0)";
// draw black border
ctx.fillRect( 0, 0, offset_x, canvas.height );
ctx.fillRect( offset_x, 0, canvas.width-offset_x, offset_y);
ctx.fillRect( canvas.width - offset_x, offset_y, offset_x,
canvas.height-offset_y );
ctx.fillRect( offset_x, canvas.height - offset_y, picture.width,
offset_y );

// draw image
ctx.drawImage( picture, offset_x, offset_y );

// hightlight the current selection :
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "rgb(127,127,127)";
ctx.fillRect( x, y, w, h );
ctx.globalCompositeOperation = "copy";
ctx.strokeStyle = "rgb(255,165,0)";
ctx.strokeRect( x, y, w, h);

#367

From: "Mathieu HENRI" <p01@...>
Date: Mon Mar 19, 2007 11:32 am
Subject: Re: Speed with canvas

p01_opera

FYI this can be done easily without Canvas, but since you ask on a
Canvas-related group, here is my take:

Why don't you simply set the image as the (CSS) background of the
Canvas tag, and only draw the colored overlay using Canvas ? it'd be
so much quicker and easier to implement.

#368

From: "Philip Taylor" <excors+yahoo@...>
Date: Tue Mar 20, 2007 10:53 pm
Subject: Re: Speed with canvas

excors_y

On 19/03/07, mc_murlock <mbonfils@...> wrote:
> Hi,
>
> I'm trying to use canvas with image (size 1000x800) (using XulRunner).
> My aim is to allow user to select part of picture : highlighting the
> selection, I'm redrawing canvas at each mouse event if a mouse button
> is down.
>
> The code is ok but not very fast (I'm using Windows XP, AMD 2200+),
> I've tried the different value of globalCompositeOperation with no
> success.
>
> Have you got any tips ?

It would probably be useful to work out where the bottleneck is. If
you comment out the drawImage, does it go much faster? If you comment
out the highlighting fillRect/strokeRect, does it go much faster? Or
both equally?

If it's the drawImage that is slow, there's probably nothing you can
do directly to make it faster (other than being certain it's drawn
pixel-aligned, with no scaling or non-integer-pixel translation).
(Actually, that's not true if you're interested in performance in
Opera - at least in Opera 9 on Windows, I found it several times
faster if you load the image onto a new canvas once and then use
drawImage(canvas, ...) to copy it. But that's much slower in Firefox
(at least in old versions (1.5, 2.0?) on Windows, and maybe other ones
- I can't remember exactly now, but it's worth testing), so you have
to do some browser detection and switch between the two drawing
mechanisms. That was with scaled/translated images - I don't know if
the same applies to unscaled ones.)

Anyway, if that drawImage is slow, which doesn't seem unlikely if
you're copying 1000x800 pixels onto the screen buffer, I guess you'd
have to not do it. Maybe you can get away with only doing drawImage on
the section that was highlighted during the previous frame; or even
doing it only on the sections that were highlighted during the
previous frame and are no longer highlighted in the current one. It
adds some complexity and slowness in the JS code, and it gets a bit
expensive if you do lots of drawImage calls, but it may be worthwhile
if it saves you from copying hundreds of thousands of unchanged
pixels.

If the transparent highlighting is slow, and it's the transparency
that's slow (i.e. it's faster if you use 'copy' instead of 'lighter'),
perhaps you could pre-render a highlighted version of 'picture' and
then use a plain 'copy' drawImage to draw sections of the highlighted
one. (I suppose you'd hit the
drawing-from-canvas-is-slower-than-from-images-in-FF situation, if you
pre-render the lightened picture onto a canvas; maybe toDataURL could
help with that?)

Or you could wait for OpenGL acceleration :-)

> Thanks,
> Michael

--
Philip Taylor
excors@...

#369

From: "sean_imler" <simler@...>
Date: Wed Apr 4, 2007 1:03 am
Subject: stroke curves in excanvas

sean_imler

Lines 505 and 506 of excanvas.js:
       // TODO: Following is broken for curves due to
       //       move to proper paths.

Has anyone come across this and know of a workaround or fix?

Thanks,
-sean

#370

From: "Andrew" <triptych@...>
Date: Wed Apr 4, 2007 5:21 pm
Subject: Apple is asserting it's IP rights over canvas - what does that mean for canvas?

triptych999

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html

It looks like Apple is claiming IP rights over the canvas
specification. Does that mean that canvas is dead as an open spec?
What does this mean for the future of canvas and the WHAT group in
general?

#371

From: "brendaneich" <brendan@...>
Date: Wed Apr 4, 2007 6:57 pm
Subject: Re: Apple is asserting it's IP rights over canvas - what does that mean for canv

brendaneich

--- In canvas-developers@yahoogroups.com, "Andrew" <triptych@...> wrote:
>
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html
>
> It looks like Apple is claiming IP rights over the canvas
> specification. Does that mean that canvas is dead as an open spec?

No, it means the WHATWG (I'm a founding member) is not a legal entity
and has no patent policy, so Apple must reserve its IP rights until
the spec lands in the w3c, or the WHATWG grows a patent policy.

> What does this mean for the future of canvas and the WHAT group in
> general?

The WHATWG was always intended to generate specs in an open,
lightweight fashion and standardize them with de-jure wrappings
elsewhere. The hope is that the newly-rechartered HTML working group
in the w3c will do just that, without making gratuitous changes or
adding delay.

Thanks to competitive and moral pressure from the WHATWG and others,
the w3c is using an open process for the HTML WG. You can join as an
individual member and participate. I encourage anyone on this list who
cares about <canvas> being standardized expeditiously to do so. See

http://www.w3.org/2000/09/dbwg/details?group=40318&public=1

and other links under

http://www.w3.org/html/wg/

/be

#372

From: "Andrew" <triptych@...>
Date: Wed May 16, 2007 1:59 pm
Subject: Canvas in IE8?

triptych999

I wonder what the chances are for there being a canvas in IE8 - now
that the W3C is looking into HTML5.  What are folks here doing to
account for IE?  Is excanvas the de-facto standard now for canvas folks?

#373

From: "Jerason Banes" <jbanes@...>
Date: Wed May 16, 2007 3:14 pm
Subject: Re: Canvas in IE8?

thewiirocks

Hi All!

This is my first post here after a long period of lurking, so apologies if my response has that "new poster" smell about it. ;-)

I have strong doubts about Microsoft implementing Canvas in IE8. For one thing, they don't recognize the WHATWG specifications as any sort of standard. For another, Microsoft has not kept up with the W3C standards; much less the "fast track" standards to improving the web. I'd be happy just to get DOM 2 and SVG support.

While excanvas is a workable solution, its performance leaves something to be desired. Considering that one of the primary uses of Canvas is to create web-enabled animations and video games, it seems that a better solution is in order.

One of the solutions I've been considering is to use a Java Applet or Flash component to simulate the 2D context. Either option should provide significantly better performance than the VML approach of excanvas. The straightforward nature of LiveConnect + support for hardware acceleration makes Java the preferred option. However, I believe that scripting of Flash components is also supported in IE. This makes Flash a viable alternative to the Java solution. Which is important given that Flash has greater market penetration.

The only problem with these solutions is that they won't be able to implement the spec 100%. In specific, the issue is that these embedded technologies tend to obscure the background HTML. This makes it difficult (impossible?) to have transparent canvases, reducing the effectiveness of the solution for certain classes of web animations. (Thankfully, this is not an issue for most games.) Java also has difficulties with proper handling of proxies, and would need to perform a second load on any image to be drawn by the Canvas.

Still, I think this is an option worth exploring. If I manage to find the time in the future, I will dig deeper to see what is possible.

Thanks,
Jerason Banes

I wonder what the chances are for there being a canvas in IE8 - now
that the W3C is looking into HTML5. What are folks here doing to
account for IE? Is excanvas the de-facto standard now for canvas folks?

#374

From: Vladimir Vukicevic <vladimir@...>
Date: Wed May 16, 2007 5:40 pm
Subject: Re: Canvas in IE8?

vvukicevic

Howdy,

I agree with Jerason -- I wouldn't hold my breath for canvas (or really,
any WHATWG or any modern-web specs) in IE8.  Microsoft seems to be
pushing the all-singing and all-dancing Silverlight, and so the status
quo of ignoring the web seems to continue.

I'm no big fan of Flash, but building a canvas shim using Flash seems
like a fantastic idea -- note that the only relevant platform is IE on
Windows, so Flash works fine in so-called windowless mode... in this
case it can integrate into the surrounding page HTML like native canvas
can (transparent backgrounds, overlaid elements, etc).  It would be an
interesting experiment for sure.

     - Vlad

Jerason Banes wrote:
> Hi All!
>
> This is my first post here after a long period of lurking, so apologies
> if my response has that "new poster" smell about it. ;-)
>
> I have strong doubts about Microsoft implementing Canvas in IE8. For one
> thing, they don't recognize the WHATWG specifications as any sort of
> standard. For another, Microsoft has not kept up with the W3C standards;
> much less the "fast track" standards to improving the web. I'd be happy
> just to get DOM 2 and SVG support.
>
> While excanvas is a workable solution, its performance leaves something
> to be desired. Considering that one of the primary uses of Canvas is to
> create web-enabled animations and video games, it seems that a better
> solution is in order.
>
> One of the solutions I've been considering is to use a Java Applet or
> Flash component to simulate the 2D context. Either option should provide
> significantly better performance than the VML approach of excanvas. The
> straightforward nature of LiveConnect + support for hardware
> acceleration makes Java the preferred option. However, I believe that
> scripting of Flash components is also supported in IE. This makes Flash
> a viable alternative to the Java solution. Which is important given that
> Flash has greater market penetration.
>
> The only problem with these solutions is that they won't be able to
> implement the spec 100%. In specific, the issue is that these embedded
> technologies tend to obscure the background HTML. This makes it
> difficult (impossible?) to have transparent canvases, reducing the
> effectiveness of the solution for certain classes of web animations.
> (Thankfully, this is not an issue for most games.) Java also has
> difficulties with proper handling of proxies, and would need to perform
> a second load on any image to be drawn by the Canvas.
>
> Still, I think this is an option worth exploring. If I manage to find
> the time in the future, I will dig deeper to see what is possible.
>
> Thanks,
> Jerason Banes
>
>     I wonder what the chances are for there being a canvas in IE8 - now
>     that the W3C is looking into HTML5.  What are folks here doing to
>     account for IE?  Is excanvas the de-facto standard now for canvas
>     folks?
>
>
>

#375

From: Seldo V <seld0@...>
Date: Thu May 17, 2007 6:03 am
Subject: Re: Canvas in IE8?

laurie.voss

Flash is certainly an interesting possibility for canvas support in IE -- I don't think Java would be; its performance in a browser has always been suspect.

L.

----- Original Message ----
From: Vladimir Vukicevic <vladimir@...>
To: canvas-developers@yahoogroups.com
Sent: Wednesday, May 16, 2007 10:40:00 AM
Subject: Re: [canvas-developers] Canvas in IE8?

Howdy,

I agree with Jerason -- I wouldn't hold my breath for canvas (or really,
any WHATWG or any modern-web specs) in IE8. Microsoft seems to be
pushing the all-singing and all-dancing Silverlight, and so the status
quo of ignoring the web seems to continue.

I'm no big fan of Flash, but building a canvas shim using Flash seems
like a fantastic idea -- note that the only relevant platform is IE on
Windows, so Flash works fine in so-called windowless mode... in this
case it can integrate into the surrounding page HTML like native canvas
can (transparent backgrounds, overlaid elements, etc). It would be an
interesting experiment for sure.

- Vlad

Jerason Banes wrote:
> Hi All!
>
> This is my first post here after a long period of lurking, so apologies
> if my response has that "new poster" smell about it. ;-)
>
> I have strong doubts about Microsoft implementing Canvas in IE8. For one
> thing, they don't recognize the WHATWG specifications as any sort of
> standard. For another, Microsoft has not kept up with the W3C standards;
> much less the "fast track" standards to improving the web. I'd be happy
> just to get DOM 2 and SVG support.
>
> While excanvas is a workable solution, its performance leaves something
> to be desired. Considering that one of the primary uses of Canvas is to
> create web-enabled animations and video games, it seems that a better
> solution is in order.
>
> One of the solutions I've been considering is to use a Java Applet or
> Flash component to simulate the 2D context. Either option should provide
> significantly better performance than the VML approach of excanvas. The
> straightforward nature of LiveConnect + support for hardware
> acceleration makes Java the preferred option. However, I believe that
> scripting of Flash components is also supported in IE. This makes Flash
> a viable alternative to the Java solution. Which is important given that
> Flash has greater market penetration.
>
> The only problem with these solutions is that they won't be able to
> implement the spec 100%. In specific, the issue is that these embedded
> technologies tend to obscure the background HTML. This makes it
> difficult (impossible? ) to have transparent canvases, reducing the
> effectiveness of the solution for certain classes of web animations.
> (Thankfully, this is not an issue for most games.) Java also has
> difficulties with proper handling of proxies, and would need to perform
> a second load on any image to be drawn by the Canvas.
>
> Still, I think this is an option worth exploring. If I manage to find
> the time in the future, I will dig deeper to see what is possible.
>
> Thanks,
> Jerason Banes
>
> I wonder what the chances are for there being a canvas in IE8 - now
> that the W3C is looking into HTML5. What are folks here doing to
> account for IE? Is excanvas the de-facto standard now for canvas
> folks?
>
>
>

Ready for the edge of your seat? Check out tonight's top picks on Yahoo! TV.

#376

From: "Jerason Banes" <jbanes@...>
Date: Thu May 17, 2007 3:28 pm
Subject: Re: Canvas in IE8?

thewiirocks

If you're referring to the time it takes to load the JVM, then I agree that there is an issue. A Java-based canvas is therefore more useful when the Canvas in question is central to the webpage. (e.g. A video game.) The graphical performance possible with Java makes it an ideal choice in such a situation simply because Java VMs of versions 1.4 or greater provide direct hardware acceleration of 2D graphics. Therefore, you're going to see much higher framerates in animations and games than a Flash component could offer.

It is also possible to simulate the moz-gles11 plugin by using a signed Java Applet to deploy JOGL. This is not possible in Flash.

Flash is ideal if you're attempting to create a more generic replacement for Canvas. Windowless mode sounds like an excellent solution (thanks for the suggestion, Vlad!), but the performance isn't going to be as good as what is possible with Java. Also, (and feel free to correct me if I'm wrong) Flash 8 or higher is required to implement the Canvas because earlier versions did not have an actual drawing surface. You could fake it by dynamically creating objects, but then you are back to the performance issues of VML/SVG.

This being Internet Explorer on Windows, though, requiring Flash 8 shouldn't be a problem. :)

Thanks,
Jerason

On 5/17/07, Seldo V <seld0@...> wrote:

Flash is certainly an interesting possibility for canvas support in IE -- I don't think Java would be; its performance in a browser has always been suspect.

#377

From: "Andrew" <triptych@...>
Date: Fri May 18, 2007 4:52 pm
Subject: Re: Canvas in IE8?

triptych999

I for one would love to contribute to building a canvas implementation
in Flash. I first wonder if anyone is already working on a project
like this and second wonder if folks would like to begin a FlashCanvas
implementation.

An exciting idea beyond this (if it gets off the ground ) - imagine
when work starts on the 3D canvas context. Papervision 3D meets 3D
canvas -- cool.



--- In canvas-developers@yahoogroups.com, "Jerason Banes" <jbanes@...>
wrote:
>
> If you're referring to the time it takes to load the JVM, then I
agree that
> there is an issue. A Java-based canvas is therefore more useful when the
> Canvas in question is central to the webpage. (e.g. A video game.) The
> graphical performance possible with Java makes it an ideal choice in
such a
> situation simply because Java VMs of versions 1.4 or greater provide
direct
> hardware acceleration of 2D graphics. Therefore, you're going to see
much
> higher framerates in animations and games than a Flash component could
> offer.
>
> It is also possible to simulate the moz-gles11 plugin by using a
signed Java
> Applet to deploy JOGL. This is not possible in Flash.
>
> Flash is ideal if you're attempting to create a more generic
replacement for
> Canvas. Windowless mode sounds like an excellent solution (thanks
for the
> suggestion, Vlad!), but the performance isn't going to be as good as
what is
> possible with Java. Also, (and feel free to correct me if I'm wrong)
Flash 8
> or higher is required to implement the Canvas because earlier
versions did
> not have an actual drawing surface. You could fake it by dynamically
> creating objects, but then you are back to the performance issues of
> VML/SVG.
>
> This being Internet Explorer on Windows, though, requiring Flash 8
shouldn't
> be a problem. :)
>
> Thanks,
> Jerason
>
> On 5/17/07, Seldo V <seld0@...> wrote:
> >
> >   Flash is certainly an interesting possibility for canvas support
in IE
> > -- I don't think Java would be; its performance in a browser has
always been
> > suspect.
> >
>

#378

From: Stefan Haustein <mail@...>
Date: Sat May 19, 2007 1:15 am
Subject: Re: Re: Canvas in IE8?

dukoids

Hi,

I have started working on a Java version (rhinocanvas.sf.net), but I
agree that for the browser flash probably makes more sense (installed
base, startup time,...). I would love to see more efficient canvas
support in IE.

Best regards
Stefan Haustein

Andrew wrote:
> I for one would love to contribute to building a canvas implementation
> in Flash. I first wonder if anyone is already working on a project
> like this and second wonder if folks would like to begin a FlashCanvas
> implementation.
>
> An exciting idea beyond this (if it gets off the ground ) - imagine
> when work starts on the 3D canvas context. Papervision 3D meets 3D
> canvas -- cool.
>
>
>
> --- In canvas-developers@yahoogroups.com, "Jerason Banes" <jbanes@...>
> wrote:
>
>> If you're referring to the time it takes to load the JVM, then I
>>
> agree that
>
>> there is an issue. A Java-based canvas is therefore more useful when the
>> Canvas in question is central to the webpage. (e.g. A video game.) The
>> graphical performance possible with Java makes it an ideal choice in
>>
> such a
>
>> situation simply because Java VMs of versions 1.4 or greater provide
>>
> direct
>
>> hardware acceleration of 2D graphics. Therefore, you're going to see
>>
> much
>
>> higher framerates in animations and games than a Flash component could
>> offer.
>>
>> It is also possible to simulate the moz-gles11 plugin by using a
>>
> signed Java
>
>> Applet to deploy JOGL. This is not possible in Flash.
>>
>> Flash is ideal if you're attempting to create a more generic
>>
> replacement for
>
>> Canvas. Windowless mode sounds like an excellent solution (thanks
>>
> for the
>
>> suggestion, Vlad!), but the performance isn't going to be as good as
>>
> what is
>
>> possible with Java. Also, (and feel free to correct me if I'm wrong)
>>
> Flash 8
>
>> or higher is required to implement the Canvas because earlier
>>
> versions did
>
>> not have an actual drawing surface. You could fake it by dynamically
>> creating objects, but then you are back to the performance issues of
>> VML/SVG.
>>
>> This being Internet Explorer on Windows, though, requiring Flash 8
>>
> shouldn't
>
>> be a problem. :)
>>
>> Thanks,
>> Jerason
>>
>> On 5/17/07, Seldo V <seld0@...> wrote:
>>
>>>   Flash is certainly an interesting possibility for canvas support
>>>
> in IE
>
>>> -- I don't think Java would be; its performance in a browser has
>>>
> always been
>
>>> suspect.
>>>
>>>
>
>
>
>
>
> Yahoo! Groups Links
>
>
>
>

#379

From: "ursmartini" <canvas@...>
Date: Mon May 21, 2007 6:57 am
Subject: faulty application or canvas-bug?

ursmartini

Hello!

I created a small canvas-app where you can add some photos to and
then play around with size, transparency and position using
prototype, script.aculo.us-slider-control and drag'n'drop.

All information (images, position, transparency, size, etc.) is held
in a stack inside my canvas-object. Every 50ms the canvas is cleared and
refilled with the stack-content.

If you hover over any image it gets a green mouseOver-border. Clicking
it adds a red focus-border. Images are draggable inside the canvas and
are put on top of the stack when beeing dragged or clicked.
To change size/transparency/rotation of an image you need to focus/click
the image first. Position can be changed by drag'n'drop.

Locally I use a serverside image-resizing-script (php) that improves
performance by reducing the image-size down to the necessary level.

First everything is working fine for Firefox 2 and MS IE 7 (using
excanvas.js
but if you add more and more images, there are strange bugs you can
see in
the screenshots:

expected behaviour:
    http://www.urs-martini.de/canvas/expected.jpg

incorrect behaviour:
    http://www.urs-martini.de/canvas/unexpected.jpg

Some strange mask-effects as if I used globalCompositeOperation
"source-atop"
which I don't!

    http://www.urs-martini.de/canvas/this_is_weird.jpg

Is my canvas-app buggy or how this can be explained?

For more you can try out the demo here:

    http://www.urs-martini.de/canvas/

Best regards
Urs Martini

#380

From: "Jerason Banes" <jbanes@...>
Date: Thu May 24, 2007 3:16 pm
Subject: Re: Re: Canvas in IE8?

thewiirocks

Hi All!

As per our discussion, I've done up a proof-of-concept Java shim for the CANVAS tag in IE. This is different from Stefan's excellent experiment in that it supports the host browser's Javascript engine rather than implementing its own.

The code is a bit of a mess at the moment (I had to perform quite a few experiments to find the correct solution), but it works. Currently only drawImage and fillRect are supported, but I see no reason why the path API can't also be supported.

Here is a game demo of mine converted to use the shim:

http://java.dnsalias.com/tetris/ie

You will need to click somewhere other than the falling block area if you want keyboard events to be registered. More on that below.

The source code for the shim can be seen here:

http://java.dnsalias.com/tetris/ie/canvas4ie.js
http://java.dnsalias.com/tetris/ie/canvas4ie_impl.js
http://java.dnsalias.com/tetris/ie/CanvasApplet.java

Performance is excellent despite the fact that I have not yet optimized the code. I learned several key things about writing such a shim that I think are important to both Java and Flash implementations:

Key and mouse events are trapped by the shim component. To combat this, the shim would need to forward these events back to the browser through createEvent and dispatchEvent calls. This should be quite easy to implement in Java/LiveConnect and should be only mildly more difficult in Flash.

Flicker is a potentially serious problem. Browser implementations tend to queue up drawing requests until the Javascript thread returns from a setTimeout or setInterval handler, thus eliminating flicker caused by overdraw. However, the shim has little control over the browser environment and has no idea when a handler starts or completes. I've solved this by displacing the setInterval function with my own implementation. My implementation tells the drawing context to hold off on drawing while the thread is running, then calls the original handler. Once the handler code returns, the canvas is instructed to perform a redraw. The same method can be used for setTimeout, though I have not yet implemented this.

The document.createElement function has also been overridden to create APPLEt elements when CANVAS elements are requested. This ensures that dynamically created CANVASes will also be shimmed.

Event handlers have not been trapped in this implementation, meaning that drawing from an event handler will cause flicker. A possible solution to this is to write an implementation of the DOM 2 Events API for Internet Explorer. The implementation would not only provide greater compatibility with the standards, but it would offer the chance to trap event handlers in the same way that setInterval has been trapped.

Image loading works quite well in the demos I have done. It is not clear to me if Java is able to pull from IE's cache, though I am assuming that the answer is "no". It should be possible to begin loading images in the applet as soon as the Javascript object is created by overriding the Image() constructor. The new Image() constructor could construct the original Javascript Image() in the background, as well as forward requests for new images to the Applet. An "onpropertychange" listener would be required to listen for when the Image.src attribute changes.

Since there is only one JVM per browser, it should be possible to implement the drawImage(HTMLCanvasElement) functions. The implementation would be straightforward as Applets would effectively get passed to one another. I'm not so sure how this would be done in Flash, though. The Flash/JS interface works on the basis of a fairly abstract reflection API. The image data might need to be encoded in order to transfer it from one canvas to another. The problem is that such a transfer would be guaranteed to be slow. Given the popularity of using a secondary canvas as a backbuffer, more investigation is in order to determine if a fast solution exists.

If you have any questions, I'd be happy to answer them.

Thanks,
Jerason

#381

From: Stefan Haustein <mail@...>
Date: Thu May 24, 2007 4:17 pm
Subject: Re: Re: Canvas in IE8?

dukoids

Hi Jerason,

tetris looks really great!

If you need some motivating examples for implementing the path stuff:

http://minijoe.com/samples/games/canvasoids.html
http://minijoe.com/samples/games/canvasout.html

(you may need to resize the window and reload to have it running smooth
in firefox).

If you could use pieces of rhino-canvas and there is a license issue
with the GPL, I can change it to the Mozilla license if that helps. A
good starting point is probably the class CanvasRenderingContext2D, see

http://rhino-canvas.cvs.sourceforge.net/rhino-canvas/rhino-canvas/src/net/sf/rhi\
nocanvas/js/CanvasRenderingContext2D.java?view=markup

You will probably want to use some Batik APIs for the advanced gradient
stuff.... The libraries (with just the necessary parts to reduce size)
are contained in the lib folder.

Using the browser's JavaScript engine is definitely a much better
approach than using Rhino for IE. For rhino-canvas, the starting point
was a stand-alone JS/Canvas project, and the applet was just added as an
afterthought.

Kind regards,
Stefan



Jerason Banes wrote:
> Hi All!
>
> As per our discussion, I've done up a proof-of-concept Java shim for
> the CANVAS tag in IE. This is different from Stefan's excellent
> experiment in that it supports the host browser's Javascript engine
> rather than implementing its own.
>
> The code is a bit of a mess at the moment (I had to perform quite a
> few experiments to find the correct solution), but it works. Currently
> only drawImage and fillRect are supported, but I see no reason why the
> path API can't also be supported.
>
> Here is a game demo of mine converted to use the shim:
>
> http://java.dnsalias.com/tetris/ie
>
> You will need to click somewhere other than the falling block area if
> you want keyboard events to be registered. More on that below.
>
> The source code for the shim can be seen here:
>
> http://java.dnsalias.com/tetris/ie/canvas4ie.js
> http://java.dnsalias.com/tetris/ie/canvas4ie_impl.js
> http://java.dnsalias.com/tetris/ie/CanvasApplet.java
>
> Performance is excellent despite the fact that I have not yet
> optimized the code. I learned several key things about writing such a
> shim that I think are important to both Java and Flash implementations:
>
> Key and mouse events are trapped by the shim component. To combat
> this, the shim would need to forward these events back to the browser
> through createEvent and dispatchEvent calls. This should be quite easy
> to implement in Java/LiveConnect and should be only mildly more
> difficult in Flash.
>
> Flicker is a potentially serious problem. Browser implementations tend
> to queue up drawing requests until the Javascript thread returns from
> a setTimeout or setInterval handler, thus eliminating flicker caused
> by overdraw. However, the shim has little control over the browser
> environment and has no idea when a handler starts or completes. I've
> solved this by displacing the setInterval function with my own
> implementation. My implementation tells the drawing context to hold
> off on drawing while the thread is running, then calls the original
> handler. Once the handler code returns, the canvas is instructed to
> perform a redraw. The same method can be used for setTimeout, though I
> have not yet implemented this.
>
> The document.createElement function has also been overridden to create
> APPLEt elements when CANVAS elements are requested. This ensures that
> dynamically created CANVASes will also be shimmed.
>
> Event handlers have not been trapped in this implementation, meaning
> that drawing from an event handler will cause flicker. A possible
> solution to this is to write an implementation of the DOM 2 Events API
> for Internet Explorer. The implementation would not only provide
> greater compatibility with the standards, but it would offer the
> chance to trap event handlers in the same way that setInterval has
> been trapped.
>
> Image loading works quite well in the demos I have done. It is not
> clear to me if Java is able to pull from IE's cache, though I am
> assuming that the answer is "no". It should be possible to begin
> loading images in the applet as soon as the Javascript object is
> created by overriding the Image() constructor. The new Image()
> constructor could construct the original Javascript Image() in the
> background, as well as forward requests for new images to the Applet.
> An "onpropertychange" listener would be required to listen for when
> the Image.src attribute changes.
>
> Since there is only one JVM per browser, it should be possible to
> implement the drawImage(HTMLCanvasElement) functions. The
> implementation would be straightforward as Applets would effectively
> get passed to one another. I'm not so sure how this would be done in
> Flash, though. The Flash/JS interface works on the basis of a fairly
> abstract reflection API. The image data might need to be encoded in
> order to transfer it from one canvas to another. The problem is that
> such a transfer would be guaranteed to be slow. Given the popularity
> of using a secondary canvas as a backbuffer, more investigation is in
> order to determine if a fast solution exists.
>
> If you have any questions, I'd be happy to answer them.
>
> Thanks,
> Jerason
>

#382

From: "Jerason Banes" <jbanes@...>
Date: Thu May 24, 2007 4:56 pm
Subject: Re: Re: Canvas in IE8?

thewiirocks

Hi Stefan,

tetris looks really great!

If you need some motivating examples for implementing the path stuff:

http://minijoe.com/samples/games/canvasoids.html
http://minijoe.com/samples/games/canvasout.html

Thanks for the encouragement! I don't really need any motivation to develop the rest of the APIs, but those examples would certainly help if I did. :)

The current version of the shim is more or less a proof-of-concept that I'm sharing because I just got it working. There's a lot more work necessary before I'll have a (nearly) WHATWG-compliant implementation completed.

If you could use pieces of rhino-canvas and there is a license issue
with the GPL, I can change it to the Mozilla license if that helps. A
good starting point is probably the class CanvasRenderingContext2D, see

http://rhino-canvas.cvs.sourceforge.net/rhino-canvas/rhino-canvas/src/net/sf/rhinocanvas/js/CanvasRenderingContext2D.java?view=markup

You will probably want to use some Batik APIs for the advanced gradient
stuff.... The libraries (with just the necessary parts to reduce size)
are contained in the lib folder.

No worries. I plan to use the existing Graphics2D APIs to finish the implementation. They're complete enough to where implementing the path API should not pose too much difficulty. :-)

Thanks,
Jerason

#383

From: Stefan Haustein <mail@...>
Date: Thu May 24, 2007 8:17 pm
Subject: Re: Re: Canvas in IE8?

dukoids

>
>
>     If you could use pieces of rhino-canvas and there is a license issue
>     with the GPL, I can change it to the Mozilla license if that helps. A
>     good starting point is probably the class
>     CanvasRenderingContext2D, see
>
>    
http://rhino-canvas.cvs.sourceforge.net/rhino-canvas/rhino-canvas/src/net/sf/rhi\
nocanvas/js/CanvasRenderingContext2D.java?view=markup
>
>     You will probably want to use some Batik APIs for the advanced
>     gradient
>     stuff.... The libraries (with just the necessary parts to reduce
>     size)
>     are contained in the lib folder.
>
>
> No worries. I plan to use the existing Graphics2D APIs to finish the
> implementation. They're complete enough to where implementing the path
> API should not pose too much difficulty.  :-)
Well that was what I thought.... But there is definitely some stuff in
Canvas 2D that is not covered by Graphics2D (The gradient fill as far as
I remember). However, Batik integrates nice with Graphics2D, the main
problem is to determine what is not needed to keep the JAR size reasonable.

Also, there may be differences in the way translations are handled while
the path is created (I think the current WHATWG spec is consistent with
Graphics2D, but actual Safari and FireFox behavior differ)...

Kind regards,
Stefan






>
> Thanks,
> Jerason
>

#384

From: "Philip Taylor" <excors+yahoo@...>
Date: Fri May 25, 2007 10:32 pm
Subject: Re: Re: Canvas in IE8?

excors_y

On 24/05/07, Jerason Banes <jbanes@...> wrote:
> The current version of the shim is more or less a proof-of-concept that I'm
sharing because I just got it working. There's a lot more work necessary before
I'll have a (nearly) WHATWG-compliant implementation completed.

For anyone who's trying to make a compliant implementation, I'll point
out my tests at http://canvex.lazyilluminati.com/tests/tests/ which
are incomplete and have some minor problems but do attempt to cover
lots of the spec's requirements. No browser is particularly close to
being compliant, and I've not even looked at patterns and paths yet...
(There's also http://hixie.ch/tests/adhoc/html/canvas/ and
http://tc.labs.opera.com/html/canvas/ with more tests for various
features.)

ExplorerCanvas seems to be quite limited in some areas by its
implementation approach - I'd definitely be interested in seeing
what's possible with Java or Flash.

--
Philip Taylor
excors@...

#385

From: "Andrew" <triptych@...>
Date: Thu Jul 26, 2007 8:48 pm
Subject: Canvas - ready for prime time?

triptych999

I'm wondering if folks here working on canvas implementations have
moved from just doing little demos to actually using and depending on
it for website development.
Is SVG any further along?

Which would you choose if you had to pick one to work with right now?

#386

From: "Jerason Banes" <jbanes@...>
Date: Thu Jul 26, 2007 9:01 pm
Subject: Re: Canvas - ready for prime time?

thewiirocks

Hi Andrew,

My opinion is that Canvas is very much ready for prime-time. It's well supported by Opera, Safari, and FireFox/Mozilla. IE can be made to work with a shunt from Google, and I've also got a high-performance shunt in Java on the way. (Though I can give you no dates for when it will be complete. It's an opportunistic thing.)

All this actually makes Canvas a better solution than SVG under most circumstances. Of course, it depends upon what you're doing. Static images may be better served with SVG vector graphics or server-generated bitmaps. Canvas is a good solution when you need a complex and/or interactive animation.

Also, it depends upon where you plan to deploy it. If you're going to be deploying it into a business setting composed of 99% IE browsers, then Canvas may be a less than ideal solution. In a case like that you might find that using VML or a company-wide SVG plugin might serve your needs better.

Thanks,
Jerason

On 7/26/07, Andrew <triptych@...> wrote:

I'm wondering if folks here working on canvas implementations have
moved from just doing little demos to actually using and depending on
it for website development.
Is SVG any further along?

Which would you choose if you had to pick one to work with right now?

.

#387

From: "kacper_glowacki" <k.glowacki@...>
Date: Mon Jul 30, 2007 7:17 pm
Subject: Hairy Div

kacper_glowacki

Hi fellow developers,

I have recently discovered a CANVAS tag and I must say that I'm
charmed with it. Although, it's hard for me to think of a real or
bussines use of it I have found it particulary interesting and useful
for creating cool stuff I always wanted to create in a web browser :-)

Therfore I would like to present you a small code of mine. I called it
a  "Hairy Div" which is... a draggable div (achieved with a help of
scriptaculous.js) covered with fur :)

If you're interesed and want to see it, please visit my example page,
present on my father's web account:

http://comel.net.pl/~glowacki/kacper/index.php

I'm looking forward to read your opinions!

PS. Performance is a weak side of my script. I'll definitely have to
work on this issue.
PS2. It doesn't work under IE :-/

#388

From: "Philip Taylor" <excors+yahoo@...>
Date: Mon Jul 30, 2007 9:03 pm
Subject: Re: Hairy Div

excors_y

On 30/07/07, kacper_glowacki <k.glowacki@...> wrote:
> Hi fellow developers,
>
> I have recently discovered a CANVAS tag and I must say that I'm
> charmed with it. Although, it's hard for me to think of a real or
> bussines use of it I have found it particulary interesting and useful
> for creating cool stuff I always wanted to create in a web browser :-)
>
> Therfore I would like to present you a small code of mine. I called it
> a  "Hairy Div" which is... a draggable div (achieved with a help of
> scriptaculous.js) covered with fur :)
> [...]
> http://comel.net.pl/~glowacki/kacper/index.php

That's surprisingly fun to play with :-)
Just as a random idea, might it be possible to have the box fall and
bounce under gravity? I don't know what the point would be and it
might just end up looking stupid, but maybe it'd result in some
interesting hair dynamics...

> PS2. It doesn't work under IE :-/

Doesn't quite work in Opera 9.2 either - that seems to be because you
draw each hair with globalCompositeOperation == 'copy', for which I
think the 'correct' behaviour (as in the spec, and in Opera) is to
replace the entire bitmap (including all the previously-drawn hairs)
with transparent black, with only the single latest drawn thing being
visible. Is there a reason not to just use the default (source-over)
instead of 'copy'?

--
Philip Taylor
excors@...

#389

From: "kacper_glowacki" <k.glowacki@...>
Date: Tue Jul 31, 2007 7:31 am
Subject: Re: Hairy Div

kacper_glowacki

Hi, thanks for your replay!

> might it be possible to have the box fall and
> bounce under gravity? I don't know what the point would be and it
> might just end up looking stupid, but maybe it'd result in some
> interesting hair dynamics...

Hm..., I believe that this would look really nice, and wouldn't be too
hard to implement.

> Doesn't quite work in Opera 9.2 either - that seems to be because you
> draw each hair with globalCompositeOperation == 'copy', for which I
> think the 'correct' behaviour (as in the spec, and in Opera) is to
> replace the entire bitmap (including all the previously-drawn hairs)
> with transparent black, with only the single latest drawn thing being
> visible. Is there a reason not to just use the default (source-over)
> instead of 'copy'?

Yes, you're right. I have misunderstood the meaning of 'copy'
operation. What I wanted to achieve was to have the whole canvas
cleared on each frame. Because 'copy' wasn't working as I expected
(which turned out to be wrong) I used "clearRect" instead, but forgot
to remove 'copy' from the code.

PS. My colleague from my office found interesting use for this 'toy'.
We could use it in our web application on pages which displaying takes
a lot of time (special reports generation), so user won't get bored
waiting for it ;-) It would be as a sort of 'destressor', in this case.

#390

From: "Andrew" <triptych@...>
Date: Fri Aug 3, 2007 8:02 pm
Subject: Great new feature in Firefox 3.x - canvas drawstring!

triptych999

https://bugzilla.mozilla.org/show_bug.cgi?id=339553

Check out this page for alot more features that made it in for
"feature freeze" for Firefox 3.x

http://www.squarefree.com/burningedge/2007/08/01/2007-08-01-trunk-builds/

#391

From: "koneru_sudhir" <koneru_sudhir@...>
Date: Sat Aug 4, 2007 2:02 am
Subject: save canvas as an image in server database

koneru_sudhir

hello,


can nayone help me out about how can we save an canvas that was drawn
(in IE) can be saved in the database.

thank you

sudhir.
--- In canvas-developers@yahoogroups.com, Marcus Engene <ehsmeng@...>
wrote:
>
> grussmir wrote:
> > Hi folks,
> > Canvas-Newbie Question:
> > Is there any possibility to get the image data out of the canvas into
> > a variable to post it back to my php-server-skript?
> > That would allow us to make some kind of dashboard.....
> >
> > MiR
> Hi,
>
> As far as I know, no. Not widely implemented anyway. Apart from the
> function Arve Bersvendsen just wrote about, a getPixel()-function would
> be nice. Then it would be easy to read the pixels in js and create
an image.
>
> Anyway, as a workaround for this I did a simple js-class that has some
> drawing functions on it. You could mirror the drawing to the canvas to
> an instance of that class. Ie, you create an instance of CBMPStuff with
> the same resolution as the canvas, when you draw a line, set a pixel or
> whatever, you call the corresponding method on CBMPStuff. (In practice
> there aren't so many functions implemented there right now.)
>
> When user presses the send-button, ask the class to generate a bmp of
> it. Or just dump the bytes in f.ex a <textarea>, HTTP:POST it and parse
> it from PHP & save it as a file. php:s gd could convert it to a more
> convenient format.
>
> Others have done more complete implementations of the very same thing,
> one was using png, which would be nice if you want to preserve alpha
f.ex.
>
> http://engene.se/canvas/bmpimg/
> http://engene.se/canvas/bmpimg/test.html
> http://engene.se/canvas/bmpimg/test2.html
>
> Best regards,
> Marcus
>

Reply | Messages in this Topic (6)

#392

From: "Andrew" <triptych@...>
Date: Wed Sep 5, 2007 6:35 pm
Subject: Anyone look at Opera 9.5? What's new for Canvas in this version?

triptych999

I hear there are advances in Canvas in the new Opera 9.5 alpha. Has
anyone heard about the details?

#393

From: "Philip Taylor" <excors+yahoo@...>
Date: Wed Sep 5, 2007 7:06 pm
Subject: Re: Anyone look at Opera 9.5? What's new for Canvas in this version?

excors_y

On 05/09/07, Andrew <triptych@...> wrote:
> I hear there are advances in Canvas in the new Opera 9.5 alpha. Has
> anyone heard about the details?

I've updated http://canvex.lazyilluminati.com/tests/tests/results.html
with test results from Opera 9.5. The new features are:
* transform, setTransform
* isPointInPath
* getImageData, putImageData
and various bug fixes and a few regressions.

--
Philip Taylor
excors@...

#394

From: "osshaffer" <gnrhapr@...>
Date: Fri Sep 21, 2007 6:29 am
Subject: This really bugs me...

osshaffer

Well, I am making some games now and some nice art, but anyone can
just take my script. Not like Flash, which is compiled.
If only there was a way to compile Canvas into an object, which it's
source can not be seen.


Thanks,
Shaffer.