Openlayers 3 - Issue using a polygon as a background

Question

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 I'm displaying openlayers on is also black, as is the map background - so the document is invisible.

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

The problem is when I pan around, the polygon is constantly redrawing, causing some undesirable effects. See this jsFiddle for an example.

Is there an alternative way of setting the background colour of a layer or is there a setting 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
  })
});