<!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>