--- In canvas-developers@yahoogroups.com, "Philip
Taylor" <excors+yahoo@...> wrote:
>
> On 30/10/06, Matt Westcott <matthew@...> wrote:
> > --- In canvas-developers@yahoogroups.com,
"davez1982" <davez82@>
wrote:
> >
> > > 1) Is it possible to manipulate the perspective of an image or
to fill
> > > a shape in perspective?
> >
> > It ought to be possible to do that (with a bit of matrix algebra)
> > through the transform / setTransform methods, but they were only
added
> > to the Canvas spec a few months back, and as a result no browsers
> > currently implement them (as far as I know).
>
> My memory of geometry is not entirely clear, but I believe you can't
> do perspective with setTransform because it only handles 2D affine
> transformations - parallel lines will always remain parallel. The
> transform matrix only contains six values (m11, m12, m21, m22, dx,
> dy)



Correct.
The setTransform() method is an affine transformation in 2D space.

The result would be as good ( or bad ) as the texture mapping on
PlayStation 1. It could be acceptable if you subdivide the polygons
into small triangles but it's tough to balance between speed and
quality.

Back in the days of Quake 1, the perspective correction was done
every 8 ( or 16 ) pixels and the mapping was affine in between. It
was mostly visible when you walked along a wall because of the big
difference of perspective from one edge to the other. But this
technique is still too heavy for JavaScript and Canvas.



> That's a relatively easy case since the walls are always vertical -
I
> also did some perspective-correct textured floors like
> http://canvex.lazyilluminati.com/misc/floor5.jpg by drawing thin (2
> pixel) horizontal strips, with a rotated/scaled/translated image
> pattern fill (plus some mipmapping because images normally get
scaled
> down in an ugly flickery way). It works by setting the transform
> matrix such that the desired line of texture will be transformed
onto
> the desired line of screen coordinates (corresponding to the current
> horizontal strip), then drawing a pattern-filled rectangle which
ends
> up getting transformed to those screen coordinates; that just
involves
> some maths (or experimentation and typing in random equations until
it works).
> I think that method could support any arbitrary 3D polygon (though
my
> code was limited to the requirements of my floors) - but the biggest
> problem is that it's really quite slow, because it needs lots of
> textured-rectangle-fills for each polygon, which makes it unusable
in most practical cases.



It can work for arbitrary 3D polygons but it would be really CPU
intensive and most likely not suitable for more than ~20-30
triangles. :|

Hi there

I wrote a small L-Systems interpreter which uses canvas as the drawing
area. Currently only a few commands are implemented. More features
will eventually be added later.

I have only tested it on Firefox so far.

The link is:
http://lsysjs.qwert.ch/

Thanks and have fun,
Philipp

Philipp Stucki wrote:
>
> Hi there
>
> I wrote a small L-Systems interpreter which uses canvas as the drawing
> area. Currently only a few commands are implemented. More features
> will eventually be added later.
>
> I have only tested it on Firefox so far.
>










Beautiful!

Hi Vlad,

maybe you read this post. Just wanted to rembember to moz-gles11,
still keen on your release of it. Since FF2.0 is out now I was
wondering, if the 3D context made any progress?
Sorry, if I bother you, just a kind reminder.
Michael

-- In canvas-developers@yahoogroups.com, "Vladimir Vukicevic"
<vladimir@...> wrote:
>
> Hi Michael,
>
> On 8/11/06, grussmir <gruss.mir@...> wrote:
> > Hello to all,
> > maybe this question is adressed especially to Vladimir Vukicevic, but
> > I am looking for the Canvas OpenGL (3d context) extension for Firefox
> > 2(BonEcho) Beta. Can anyone tell me, if this is out already and where
> > to find it?
> > And, by the way, how to handle the API...., maybe a little scripting
> > demo, to start from.
> > Thank you for your patience
> > Michael (mir)
>
> I'll have to apologize here -- I haven't had time to do finish up the
> extension for the moz-gles11 context since XTech; I've been swamped
> with other work which kept pushing this down.  It's pretty close,
> especially for an early first-release, and it's definitely still on my
> todo list (and getting closer to the top, too).  I'll send an email
> here when it's available.
>
>     - Vlad
>

hi guys,

I'd like to programatically resize CANVAS object to match the page it's in (for
example when
the user resizes the page of the browser).

I tried everything I could think of. I even tried document.writeln to write a
brand new BODY
with new CANVAS element, which works in Safari and Opera, but not in Firefox or
OmniWeb.

Is it just not possible to have CANVAS resized programatically right now?


cheers

The following works in Firefox:

document.getElementById('yourcanvasid').height = newHeightInPx;
document.getElementById('yourcanvasid').width = newWidthInPx;

Don't know whether this works in Opera or Safari.

HTH
Philipp

--- In canvas-developers@yahoogroups.com, "gziemski" <gziemskiiii@...>
wrote:
> [...]
> I tried everything I could think of. I even tried document.writeln
to write a brand new BODY
> with new CANVAS element, which works in Safari and Opera, but not in
Firefox or OmniWeb.
> [...]

I should have said what I tried:

- setting width and height memebers
- setting position to absolute and manipulate top/left/bottom.right style
memebers
- setting width and height to "100%"
- writing brand new BODY and CANVAS element

None of the above worked consistently accross all the browsers that I have
tried: Safari,
FireFox, Opera and OmniWeb, not to mention InternetExplorer.

I used to work in Java exclusively and found it was tricky to keep the code
platform
independent there. Here it's like writing the same app 5 times ;-)


cheers

--- In canvas-developers@yahoogroups.com, "Philipp Stucki" <philipp@...> wrote:
>
> The following works in Firefox:
>
> document.getElementById('yourcanvasid').height = newHeightInPx;
> document.getElementById('yourcanvasid').width = newWidthInPx;
>
> Don't know whether this works in Opera or Safari.
>
> HTH
> Philipp
>
> --- In canvas-developers@yahoogroups.com, "gziemski" <gziemskiiii@>
> wrote:
> > [...]
> > I tried everything I could think of. I even tried document.writeln
> to write a brand new BODY
> > with new CANVAS element, which works in Safari and Opera, but not in
> Firefox or OmniWeb.
> > [...]
>

Another example:

        
http://diegogomezdeck.blogspot.com/2006/05/comet-y-canvas-morphic-en-el-browser.\
html

It's a Squeak Morphic World rendered in a Canvas using JS generated from
Squeak (Smalltalk).

Cheers,

-- Diego

> Is anyone creating Canvas pictures from languages other then
> Javascript?
>
> Just saw this example of using Ruby to create canvases
> http://drp.rubyforge.org/rdoc/files/INTRO.html
>
> This project could allow Haskell to be used
> http://www.haskell.org/pipermail/haskell/2006-November/018725.html
>     David

--
==========================================
  Diego Gomez Deck
------------------------------------------
  http://diegogomezdeck.blogspot.com/
  http://smalltalk.consultar.com/
==========================================

A week ago i updated to the ExplorerCanvas November patch and the peskier
problems that I
had previously reported have gone away.

the <canvas> element emulation now seems to work perfectly under MSIE6 & 7

http://www.locationset.com/test/ultrathumb/

I wish to thank the Google engineers for the great job they've done !

Hi all -

I have a little application I built using canvas. It works in Firefox
etc. but not in IE. I've tried to use Google's canvas lib to produce a
cross-browser version but Google's lib seems to rely on searching the
DOM onload for <canvas> tags -- and my application adds new canvas
tags dynamically, potentially an unlimited number over the use-time of
the app (it destroys them as well, it doesn't just guzzle memory ;-)).

Has anyone found a way of supporting dynamically-created canvas tags
in IE? Is there a patch for the google lib to do this?

Laurie.

While browsing del.icio.us I discovered a new canvas implementation:
http://canvaspaint.org/

Looks to be a faithful remake of Microsoft Paint. Kinda cool.

Hey,

You'll have to call G_vmlCanvasManager.initElement manually
for canvas elements created through script.

Say you have the following code to create the canvas element:

var canvas = document.createElement('canvas');
document.appendChild(canvas);

To init the emulaiton in IE you'll have to call initElement, like such:

  /* Init explorercanvas emulation for IE */
  if ((!canvas.getContext) && (typeof G_vmlCanvasManager != "undefined")) {
     canvas = G_vmlCanvasManager.initElement(canvas);
  }

--
Emil A Eklund

Hi,

I have just added Applet support to the Rhino-Canvas project. The Applet
should be able to run standalone Javascript Canvas applications in any
browser with the Java 1.4 plugin. This may be useful for running
standalone applications (not depending on browser interaction) in older
browsers, or in cases where CanvasExplorer is not suitable for some
reasons (and no browser interaction is needed).

In general, the Rhino-Canvas project aims at providing access to the
WHATWG Canvas API without web browser dependencies for the Rhino
Javascript interpreter.

http://rhino-canvas.sourceforge.net/

Best regards,
Stefan

is the canvas tag and toDataURL method supported in Netscape?

Its been a while since there was activity on this list, but I just
noticed something noteworthy.

It seems, at least on Firefox 2.0.0.1 the getImageData() spec (see
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas) is
implemented.

What this means is you can cycle through the pixels and change colors,
doing any kind of compositing you wish.

What I did in the example code (uploaded to the files section in a
file called "buttons.html") is a draw a bunch of shapes with varying
levels of red, then I cycle through part of the image swapping the
red/blue color values.

This does not work with the version of Opera that I'm using (9.00
build 8501) but it may be supported in the current(?) version.

Anyway, just thought it was interesting.

Let me know if my sample code doesn't work.

-Don

Just a note to folks here - the list may be quiet right now while
canvas slowly gains adoption, however I will immediately ban and
delete messages of anyone attempting spam.

If the spam continues I'll convert the list to moderated membership.

Now back to your regularly scheduled mailing list.

It worked for me. Way cool!
Let's hope that the browser developers get together and reach feature
parity soon with regards to canvas.

--- In canvas-developers@yahoogroups.com, "Don Frehulfer"
<dfrehulf@...> wrote:
>
> Its been a while since there was activity on this list, but I just
> noticed something noteworthy.
>
> It seems, at least on Firefox 2.0.0.1 the getImageData() spec (see
> http://www.whatwg.org/specs/web-apps/current-work/#the-canvas) is
> implemented.
>
> What this means is you can cycle through the pixels and change colors,
> doing any kind of compositing you wish.
>
> What I did in the example code (uploaded to the files section in a
> file called "buttons.html") is a draw a bunch of shapes with varying
> levels of red, then I cycle through part of the image swapping the
> red/blue color values.
>
> This does not work with the version of Opera that I'm using (9.00
> build 8501) but it may be supported in the current(?) version.
>
> Anyway, just thought it was interesting.
>
> Let me know if my sample code doesn't work.
>
> -Don
>

Hi all,

there has been quite some discussion on drawString() from time to time
on the WHATWG list, yet still none of the main browser vendors seems
committed to add this kind of feature. Of course, Canvas is only one of
many topics for WHATWG, and the list has a high volume of traffic, so
its always easy to get lost when the next hot topic comes up.

Now the iPhone is on the horizon, and it is still unclear whether Flash,
Java or native apps will be supported at all, so Canvas may be the only
option left for smaller developers....  However, Canvas without a simple
drawString() method makes it difficult to display stuff like street
names in map applications, labels in graph applications, high scores in
games, you name it...

I have tried to create a simple proposal that should work fine (see (1),
comments are welcome), but basically I can live with anything that is
simple to use and to implement.

Perhaps we -- as a group -- can somehow put more weight behind this
issue (assuming you share my view that Canvas is incomplete without
drawString()), but I am not sure what may be the best way to make some
kind of progress....?

Best regards,
Stefan Haustein

1) http://rhino-canvas.sourceforge.net/www/drawstring.html

On Thu, 25 Jan 2007 16:56:16 +0100, David Curran <david.curran@...>
wrote:

> on a related note.
> How would you deal with canvas spam?
> Large amounts of spam now uses images files to convey the data. What
> would happen if vector based images were used instead? Could current
> techniques be adapted to recognise spam in canvas elements?

Canvas spam is highly unlikely to ever happen, as canvas is dependent on a
scripting engine. I do not know of one mail display engine in 2007 that
executes JavaScript.

> In a similar problem do canvas image ads bypass ad filters in browsers?

Depends. You cannot fool Opera's content filtering by loading the image in
JavaScript to then display it on a canvas, as the blocking is URL-based.
What happens in other content blockers, I don't know.

If you are talking about generating the entire in-page ad using canvas
without loading bitmaps into the canvas, it might be more problematic,
unless you start blocking page elements based on element dimensions.

--
Arve Bersvendsen, Web Applications Developer

Opera Software ASA, http://www.opera.com/

Anyone know of a way to re-color an image once it is loaded? I can't
seem to find a command to do that under canvas.

This is how i handle dynamically resizing the canvas fit inside a
table. I've only tested this in Firefox
though, i have not tested it in either opera nor safari ...


<table id=maintbl border=1 width=100% height=100%>
<tr><td valign=top align=left width=80% >
     <div style="position: relative; width: 100%; height: 450px;">
       <!-- SET MAIN ANIMATION AREA -->
    	 <canvas id='canvasBG' width="100%" height="450px" style='width:
100%; height: 450px; background-color: #000; position: absolute; top:
0px; left: 0px; background: black url("images/starbackground2.gif")
repeat top left;'></canvas>
    	 <canvas id='canvas' width="100%" height="450px" style='width:
100%; height: 450px; position: absolute; top: 0px; left: 0px;'></canvas>
       </div>
   </td><td valign=top>
  	 <canvas id='canvasDisplayOne' width=250px height=100px
style='width: 250px; background-color: #0F0;'></canvas>
     </td>
   <td width=120 height=600 rowspan=3>
	 <!-- Reserved space -->
     </td>
   </tr>
</table>

<script>

function resized() {
   document.getElementById('canvas').width =
document.getElementById('canvas').clientWidth;
   document.getElementById('canvasBG').width =
document.getElementById('canvasBG').clientWidth;
   document.getElementById('canvas').height =
document.getElementById('canvas').clientHeight;
   document.getElementById('canvasBG').height =
document.getElementById('canvasBG').clientHeight;
   }

function init(){
   resized();
   }

</script>

Hi, every one

I have seen some canvas examples which seem to be using 3d graphics.

Can I find tutorials to explain how to make things like those?

Thank you very much.

I have not seen any tutorials, there is really no API yet for any of
this. Once we hear more about openGL ES like api then perhaps. I have
been trying to get in touch with folks at Mozilla developing this, but
no luck. For now everyone is on their own codding.

Few things I did want to mention, I hope to setup a wiki with some of
my code and tests, I will post it as soon as I get back into town.

If anyone knows of further development on 3d canvas please share it
with  the group, I think we are all eager to learn.

Best,
Lec