You are here: Reference > JavaScript > client-side > browser > properties > bufferDepth (screen)

bufferDepth property (screen)

Browser support:
Sets or retrieves the number of bits used to represent the color of a single pixel in the off-screen bitmap buffer.
The value of the colorDepth property can be modified with the bufferDepth property.


You can find the related objects in the Supported by objects section below.
This property is read/write.

Possible values:

Integer that sets or retrieves the number of bits.
One of the following values:
Off-screen buffering occurs in the the color depth of the screen.
Default. Off-screen buffering not necessarily occurs.
Off-screen buffering occurs in 1 bit depth.
Off-screen buffering occurs in 4 bit depth.
Off-screen buffering occurs in 8 bit depth.
Off-screen buffering occurs in 15 bit depth.
Off-screen buffering occurs in 16 bit depth.
Off-screen buffering occurs in 24 bit depth.
Off-screen buffering occurs in 32 bit depth.
Off-screen buffering occurs in 48 bit depth.
Default: 0.

Example HTML code 1:

This example illustrates the use of the bufferDepth and colorDepth properties:
    <script type="text/javascript">
        function Init () {
            var depthSelect = document.getElementById ("depthSelect");
            depthSelect.value = screen.bufferDepth;
            DisplayColorDepth  ();

        function DisplayColorDepth () {
            var depthInfo = document.getElementById ("depthInfo");
            depthInfo.innerHTML = "bufferDepth: " + screen.bufferDepth + ", colorDepth: " + screen.colorDepth;

        function ModifyColorDepth (selectTag) {
            if (screen.bufferDepth === undefined) {
                alert ("Your browser does not support the bufferDepth property!");
            screen.bufferDepth = selectTag.value;
            DisplayColorDepth  ();
<body onload="Init ()">
    Modify the number of bits used to represent the color of a single pixel with this selection list:
    <select id="depthSelect" onchange="ModifyColorDepth (this)">
        <option value="-1">-1</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="4">4</option>
        <option value="8">8</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="24">24</option>
        <option value="32">32</option>
        <option value="48">48</option>
    <br /><br />
    The current bit depths:
    <span id="depthInfo" style="padding-left:10px;"></span>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content