HTML5 Trouble with canvas scaling and full screen switching

[AndrewC]

I'm trying to perfect my html 5 canvas scaling and full screen switching but have the following problems (code below and screenshots (shrunken for the forum) attached):
1. The scaling (keeping the aspect) only works properly on the vertical, i.e. if you shrink the browser horizontally it doesn't shrink.
2. The scaling only shrinks, it doesn't expand.
3. When switching to full screen mode the scaling and aspect go out of the window and it stretches everything.
4. Is it possible to get the clickable button to appear at the correct location and size based on the scaled canvas?

If I keep tweaking things I might be able to sort out points 1 and 2, but I have no idea about how to sort out 3 and 4 or even whether it is possible.

Thanks for any help in advance.

I'm using the following html5 scaling code from one of the tutorials (with a bit added) - it is in a script called lib_script_scale_canvas:

var _bw = GAME_WIDTH;
var _bh = GAME_HEIGHT;
var _cw = min(GAME_WIDTH, browser_width);
var _ch = min(GAME_HEIGHT, browser_height);
var _aspect = (_bw / _bh);

if ((_cw / _aspect) > _ch)
    {
    window_set_size((_ch *_aspect), _ch);
    }
else
    {
    window_set_size(_cw, (_cw / _aspect));
    }

window_center();

view_wport[0] = min(window_get_width(), _bw);
view_hport[0] = min(window_get_height(), _bh)

if (surface_get_width(application_surface) != GAME_WIDTH) || (surface_get_height(application_surface) != GAME_HEIGHT)
{
    surface_resize(application_surface, GAME_WIDTH, GAME_HEIGHT);
}

I have a a draw control object called obj_game_control_draw which has the following to track browser resizing in it's step code:

// SCALE CANVAS
if (browser_width != current_browser_width || browser_height != current_browser_height)
{
    current_browser_width = browser_width;
    current_browser_height = browser_height;
    lib_script_scale_canvas();
    view_width = view_wport[0];
    view_height = view_hport[0];
}

This same obj_game_control_draw object has a Post Draw event with my shaders in it, for example, the basic one it:

shader_set(lib_shader_standard);
draw_surface_stretched(application_surface, 0, 0, view_width, view_height);
shader_reset();

I have a clickable object that allows for the switching of the browser to fullscreen mode (it uses some js code):

fullscreen_button = clickable_add(100, 100, sprite_get_tpe(spr_button_toggle_fullscreen, 0), "gmcallback_fullscreen", "_self", "width=100, height=100, menubar=0, toolbar=0, scrollbars=0");

Screenshot showing canvas not stretched on the vertical ( also button not in correct place and not sure how to position is properly).


Screenshot showing canvas scaling properly on the vertical, but it doesn't scale on the horizontal if I reduce the browser width.


Screenshot showing what happens when the fullscreen button is pressed and the scaling with aspect doesn't work at all.


A link to my project: http://www.cirelious.com/html-canvas.yyz