<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial size=2>Hi, Peter,</FONT></DIV>
<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px">
<DIV style="FONT: 10pt arial">----- Original Message ----- </DIV>
<DIV
style="BACKGROUND: #e4e4e4; FONT: 10pt arial; font-color: black"><B>From:</B>
<A title=peterjoel@gmail.com href="mailto:peterjoel@gmail.com">Peter Hall</A>
</DIV>
<DIV style="FONT: 10pt arial"><B>To:</B> <A title=news@terrainformatica.com
href="mailto:news@terrainformatica.com">Andrew Fedoniouk</A> </DIV>
<DIV style="FONT: 10pt arial"><B>Cc:</B> <A title=whatwg@whatwg.org
href="mailto:whatwg@whatwg.org">whatwg@whatwg.org</A> </DIV>
<DIV style="FONT: 10pt arial"><B>Sent:</B> Tuesday, May 09, 2006 11:57
AM</DIV>
<DIV style="FONT: 10pt arial"><B>Subject:</B> Re: [whatwg] Canvas and DOM
elements</DIV>
<DIV><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT
face=Arial size=2></FONT><BR></DIV>
<DIV>I disagree, for a number of reasons.<BR><BR>1. When an element is
resized, the bitmap and context get re-initialized to their default state.
This doesn't happen in any other scenario, and I think it would be non-obvious
and difficult to work with. For example, if you draw a custom bullet point,
you wouldn't want to redraw it every time you resize the element, since the
actual graphic isn't changing size. Best practice would evolve to discourage
your suggested usage by always using a dedicated <div> for
graphics.</DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV></BLOCKQUOTE>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>This is also what I don't
like in <canvas> solution. It forces to use some screen buffer for
drawing.</FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>Strictly speaking this is
not the best way to draw in significant number of situations. Your bullet
case is a good example.</FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2></FONT> </DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>I think it is better to
have Element.onPaint( Canvas gx, int width, int height )
event and </FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>method getContext()
available for Image only.</FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2></FONT> </DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>This way is possible to
implement ligthweight simple rendering like bullets and buffered
rendering</FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>using Image if
needed. This is at least more flexible.</FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2></FONT> </DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2>Another idea
for drawing bullets - to design some mechanism to use Image +
getCanvas + sort of setStyleAttribute("list-image", that_image)</FONT></DIV>
<DIV style="MARGIN-RIGHT: 0px"><FONT face=Arial size=2></FONT> </DIV>
<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px"><FONT
face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT face=Arial
size=2></FONT><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT>
<DIV><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT
face=Arial size=2></FONT><FONT face=Arial size=2></FONT><BR><BR>2. It's much
cleaner to keep all the canvas-related attributes and methods together,
without having to contaminate other DOM elements, that aren't going to use
them.</DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV></BLOCKQUOTE>
<DIV><FONT face=Arial size=2>canvas-related attributes ? You mean
those <EM>width</EM> and <EM>height?</EM> </FONT></DIV>
<DIV><FONT face=Arial size=2>They are optional anyway. </FONT></DIV>
<DIV><FONT face=Arial size=2>If you need to define dimension of something
exactly by width and height attributes then you can use <img> or
<object> and draw on them.</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>canvas-related method is only one - getContext().
And as I said it can be eliminated by using onPaint event.</FONT></DIV>
<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px"><FONT
face=Arial size=2></FONT><FONT face=Arial size=2></FONT>
<DIV><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT
face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT face=Arial
size=2></FONT><BR><BR>3. Your argument about placing graphics above and below
other content seems invalid. Since, <canvas> supports transparency, you
could position it above or below any other element, and get the same
effect.</DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV></BLOCKQUOTE>
<DIV><FONT face=Arial size=2>In my opinion what is really invalid is use of
<canvas> in the way you explained.</FONT></DIV>
<DIV><FONT face=Arial size=2>How would you position it above and below? Again by
using scripts or/and moving all things out of static positioning? </FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>In the way it is defined <canvas> is just a
special kind of </FONT><FONT face=Arial size=2><object>, so why not
use existing <object> then? </FONT></DIV>
<DIV><FONT face=Arial size=2>As far as I understand <object> was specially
designed to serve such purposes.</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>Andrew Fedoniouk.</FONT></DIV>
<DIV><FONT face=Arial size=2><A
href="http://terrainformatica.com">http://terrainformatica.com</A></FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px"><FONT
face=Arial size=2></FONT>
<DIV><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT
face=Arial size=2></FONT><FONT face=Arial
size=2></FONT><BR><BR>Peter<BR><BR></DIV>
<DIV><SPAN class=gmail_quote>On 5/9/06, <B class=gmail_sendername>Martijn</B>
<<A
href="mailto:martijn.martijn@gmail.com">martijn.martijn@gmail.com</A>>
wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">On
5/5/06, Andrew Fedoniouk <<A
href="mailto:news@terrainformatica.com">news@terrainformatica.com</A>>
wrote:<BR>><BR>> Having dedicated DOM element (<canvas>) for
drawings looks a bit strange as<BR>> a design decision. <BR>>
Logically any block DOM element can provide graphics.<BR>> Ideally
getContext method should have one more parameter - layer -<BR>>
background/content/foreground -<BR>> so graphics could be mixed with the
content of the element, drawn on top <BR>> and/or below the
content.<BR><BR>Yeah, I think you make a good point
here.<BR><BR>Regards,<BR>Martijn<BR><BR><BR>> <optional><BR>>
Only as an example, Sciter allows to draw on any block element:<BR>> <A
href="http://terrainformatica.com/sciter/sciter.zip">http://terrainformatica.com/sciter/sciter.zip</A>
at<BR>> <A
href="http://terrainformatica.com/sciter/">http://terrainformatica.com/sciter/</A><BR>>
Samples are in /samples/graphics/*.htm <BR>>
</optional><BR>><BR>> Andrew Fedoniouk.<BR>> <A
href="http://terrainformatica.com">http://terrainformatica.com</A><BR>><BR>><BR>><BR>><BR></BLOCKQUOTE></DIV><BR></BLOCKQUOTE></BODY></HTML>