[Sugar-devel] WebActivity : Resizing a canvas object to the screen size ?

laurent bernabe laurent.bernabe at gmail.com
Sun Jan 26 11:22:37 EST 2014

I've solved my problem by integrating JQuery, thanks to the Shim section of
RequireJS, and by calling it in activity.js

=> loader.js

shim: {
        jquery: {
            exports: 'jquery'
    paths: {
        jquery: 'jquery'


var $ = require('jquery');
var canvas = doc.getElementById('gameZone'), // gameZone is a canvas
element inside the canvas dim, without any dimension set
            stage = new createjs.Stage(canvas),
            toolbar_height = $('.toolbar').height(),
            win_dim = new Array($(window).width(), $(window).height()),
            gameZone_dim = new Array(win_dim[0], win_dim[1]-toolbar_height);

        $("#canvas").css("overflow", "hidden");


2014-01-26 laurent bernabe <laurent.bernabe at gmail.com>

> Hello everyone,
> Some times ago, I've asked how to deal with the fact that my laptop screen
> size is rather 16/9 than a 4/3 size. And I was, among other advises,
> advised to adapt the game size to the screen size.
> I am conviced that it the way to do : but how to get the client size from
> inside my activity.js ? (Client size : I mean, in the height dimension,
> when we remove the toolbar, of course)
> Indeed, this involve computing the toolbar height, which is different for
> each version of the activity css file, and of course the whole screen size.
> But, for both task, I don't know how to do.
> Could someone point me to a good article/tutorial :
>    - in order to fetch a css property (Maybe should I add minified JQuery
>    to the libs, so that it can be easier) ?
>    - in order to compute screen size ?
> Regards
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20140126/1b0dc333/attachment.html>

More information about the Sugar-devel mailing list