HTML and CSS Reference
In-Depth Information
Full-Screen API
15
9
N/A
N/A
N/A
Entering full-screen mode
Entering full-screen mode is quite straightforward, even accounting for experimental
browser implementations. Undo any changes you made to your example in section I.3.2 ,
and then place the code from the following listing at the top of your go() function.
Listing I.23. Request FullScreen for the <canvas> element
Styling the full-screen background
If you try your new example in both Firefox and Chrome, you'll immediately notice a com-
patibility issue: Firefox defaults the full-screen background to black; Chrome defaults it to
white. Fortunately, this problem can be overcome with CSS. Check out the following list-
ing, which uses the experimental :full-screen pseudo class to set a consistent back-
ground color.
Listing I.24. Set CSS styles that only apply in full-screen mode
canvas : -moz-full-screen {
background : #006;
outline : none;
}
canvas : -webkit-full-screen {
background : #006;
outline : none;
}
canvas : fullscreen {
background : #006;
Search WWH ::




Custom Search