How to redraw / refresh map on canvas resize?

Add map.updateSize(); to the end of $("#btn-full-screen").click...

DEMO

updateSize documentation

This function should be called by any external code which dynamically changes the size of the map div (because mozilla wont let us catch the “onresize” for an element)

You can use OpenLayers.Map.updateSize method to redraw your base Layer when you maximize the map.

So, adding a function like:

var fullScreen = function () {
    map.baseLayer().redraw();
}

you would only need to add an additional option to your map:

var map = new OpenLayers.Map({
    div: "map",
    center: new OpenLayers.LonLat(0, 0),
    updateSize: fullScreen,
    minResolution: "auto",
    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
    maxResolution: "auto",
    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
    projection: Mercator,
    displayProjection: Geographic
});

Good luck!