javascript - Openlayers 3 - Issue using a polygon as a background -

i developing solution uses openlayers 3 display static images of text documents have been converted pdfs. of documents black text on white background - page i'm displaying openlayers on black, map background - document invisible.

my current solution draw white filled polygon @ same extent image being loaded behind text - providing white background extent i'm interested in.

the problem when pan around, polygon redrawing, causing undesirable effects. see jsfiddle example.

is there alternative way of setting background colour of layer or there setting prevent polygon 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 represent 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 hold 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 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   }) });