[Sugar-devel] Web activities canvas element

[Manuel Quiñones]

2013/10/10 laurent bernabe <laurent.bernabe at gmail.com>:
> Hello,
>
> 2013/10/10 Manuel Quiñones <manuq at laptop.org>
>>
>> 2013/10/9 laurent bernabe <laurent.bernabe at gmail.com>:
>> > Hello,
>> >
>> > *) I am wondering whether I can safely replace, in an index.html file of
>> > a
>> > web activity, the <div id="canvas></div> with <canvas
>> > id="canvas"></canvas>
>> > ?
>> >
>> > Because the library I am using need a real canvas element.
>>
>> You just put your <canvas> inside that <div>.
>
>
> I've put my canvas element inside the #canvas div and it worked.
>
>>
>>
>> > *) Also, if I can use a real canvas element, how can set its size to the
>> > remaining size of the screen ? (As my laptop has a wider screen than XO
>> > ones).
>>
>> It's possible by connecting to the window resize event in JS.  You can
>> see an example in Clock Web activity.
>>
>> https://github.com/manuq/clock-web
>> http://manuq.github.io/clock-web
>
>
>
> Wouldn't be simpler to use CSS instead ? I've seen that there are two css
> media added in the index.html, which seem to do what I am waiting for
> (#canvas => width:100%, overflow-y: auto, and top: 75px), but it seem that
> none are used. (Canvas lays at top = 0 px and left = 0px, width is about
> 300px ...)

I just tried changing Clock Web to make the canvas element fill the
available space.  It didn't work.  Althrough the CSS effectively makes
the canvas fill the space, the width and height values are fixed if
you read them from JavaScript.  And in Clock all drawn elements depend
on that size.  Like the hands, the face, etc.

> Regards



-- 
.. manuq ..