[whatwg] proposed canvas 2d API additions

[Ric Hardacre]

>> I agree that they shouldn't be affected by the CTM, but I disagree that
>> they should be integers. e.g. in cases like:
>>
>>    HTML                          CSS
>>    <canvas height=1 width=1>     canvas { height: 100%; width: 100%; }
>>    </canvas>
>>
>> ...where the JS then uses the coordinate space 0..1,0..1 the author might
>> want to grab the top corner by grabbing the 0,0,0.25,0.25 rect.
> 
> So, I really don't like this -- we need to nail down space the
> getPixels/setPixels coordinates should be in.  I still think that they
> should always be in the canvas space, no matter how many pixels they
> refer to in the rendered content or in the device space.  Note that in
> your example, the canvas can still be a 1x1 pixel canvas (and, I
> believe, will be in all current implementations) -- that one pixel
> will just cover the entire page. 

+1

i absolutely agree that pixels should be treated as atomic units. if a 
canvas pixel space is initialized as a 1x1 square then there is only one 
(visible) coordinate you could possibly access: (0,0)

i don't, see any problem allowing the canvas to set it's own dimensions 
e.g. the following allows the canvas' contents to scale to the device 
and assure a 1:1 pixel ratio (note: psudeo code)

<canvas></canvas>

canvas { height: 80%; width: 80%; }

function getDimensions
{
	giWidth = theCanvas.width - 1;
	giHeight = theCanvas.height - 1;
}

function doSomething
{
	for( var x = 0 ; x < giWidth ; x++ )
	...
}



the reverse case should also hold, in the following example the author 
is creating an icon-builder application:

<canvas width="16" height="16"></canvas>

canvas { height: 40%; width: 40%; }

function zoom_out
{
	theCanvas.style.width = "20%";
	theCanvas.style.height = "20%";
}

function zoom_normal
{
	theCanvas.style.width = "40%";
	theCanvas.style.height = "40%";
}

function zoom_in
{
	theCanvas.style.width = "80%";
	theCanvas.style.height = "80%";
}

in all levels of zoom the author is using the pixel-space of the canvas, 
and using the css (via whatever means, perhaps vertical and horizontal 
alignment in a table cell) to show the canvas center-screen. And thus:

function iconLoad( aIconData )
{
	theCanvas.setPixels( 0 , 0 , 15 , 15 , aIconData );
}

function iconSave( )
{
	return theCanvas.getPixels( 0,0,15,15 );
}


Ric Hardacre
http://www.cyclomedia.co.uk/