Openlayers 3 - Problem using polygon as background

I am developing a solution that uses Openlayers 3 to display static images of text documents that have been converted from PDFs. Some of my documents are black text on a white background - the page where I show open windows is also black as the map background, so the document is invisible.

My current solution is to draw a white filled polygon to the same extent as the image being loaded, but behind the text - essentially providing a white background to the extent that I'm interested.

The problem is when I swap the polygon is constantly redrawing causing some unwanted effects. See this jsFiddle for an example.

Is there an alternative way to set the background color of the layer or is there an option that will prevent the polygon from flickering.

CSS

body{
    background-color:black;
}

      

        
        
        
      

    

Html

<div id="map" class="map"></div>

      

        
        
        
      

    

Javascript

var imgURL = 'http://i.stack.imgur.com/9C8Xu.png';
var extent = [0,0,488,198];

var projection = new ol.proj.Projection({
  units: 'pixels',
  extent: extent
});

 //A polygon that will represent a white background 
var polyFeature = new ol.Feature({
    geometry: new ol.geom.Polygon([
        [
            [0, extent[1]], 
            [0, extent[3]], 
            [extent[2], extent[3]], 
            [extent[2], extent[1]] 
        ]
    ])
});

//A base layer to hold the polygon feature
var baseLayer = new ol.layer.Image({
                    source: new ol.source.ImageVector({
                                    source: new ol.source.Vector({
                                    features: [polyFeature]
                                }),
                    style: new ol.style.Style({
                                    fill: new ol.style.Fill({color: 'white'})
                                })
                    })
                });

var docLayer = new ol.layer.Image({
                      source: new ol.source.ImageStatic({
                      url: imgURL,
                      imageExtent: extent
                  })});

// build the map
var map = new ol.Map({
  layers:[baseLayer,docLayer],
  target: 'map',
  view: new ol.View({
    projection: projection,
    center:  ol.extent.getCenter(extent),
    zoom: 2.5
  })
});