# Billboard Canvas Turn Black

**URL:** <https://community.cesium.com/t/billboard-canvas-turn-black/4991>\
**Category:** CesiumJS\
**Created:** [January 6, 2017, 12:05am UTC](https://community.cesium.com/t/billboard-canvas-turn-black/4991 "2017-01-06T00:05:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![j.penano.bl](https://avatars.discourse-cdn.com/v4/letter/j/b19c9b/32.png) [@j.penano.bl](https://community.cesium.com/u/j.penano.bl)\
**Post date:** [January 6, 2017, 12:05am UTC](https://community.cesium.com/t/billboard-canvas-turn-black/4991/1 "2017-01-06T00:05:12Z")

</div>

In my Cesium application, I am using Cesium Billboards to display popups with content by embedding html canvas objects in them. However, after sometime of the popups running, the billboards turn black and remain so until the webpage is refreshed and ultimately causing the application to restart.

We are refreshing these popups to display new data by use of a synchronous ajax requests to our backend every 3-5 seconds. In our code, we are basically recreating the canvas that holds this content and re rendering the Billboard.

Here is some relevant code:

//creates the popup first  
function loadPopup(id, type, name, data) {  
&nbsp;&nbsp;viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;id : id,  
&nbsp;&nbsp;&nbsp;&nbsp;name : name,  
&nbsp;&nbsp;&nbsp;&nbsp;position : data.position,  
&nbsp;&nbsp;&nbsp;&nbsp;billboard : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image : createPopupCanvas(id, type, name, data),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;verticalOrigin : Cesium.VerticalOrigin.BOTTOM,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scaleByDistance : new Cesium.NearFarScalar(1500, 2, 80000000, 0.25)  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;});  
}

//updates popup synchronously  
function updatePopup(id, type, name, data) {  
&nbsp;&nbsp;var newPosition = Cesium.Cartesian3.fromDegrees(data.lon, data.lat, 99999);  
&nbsp;&nbsp;var currPopup = viewer.entities.getById(id);  
&nbsp;&nbsp;  
&nbsp;&nbsp;if (currPopup != undefined) {  
&nbsp;&nbsp;&nbsp;&nbsp;currPopup.position = newPosition;  
&nbsp;&nbsp;&nbsp;&nbsp;//new popup content generated here  
&nbsp;&nbsp;&nbsp;&nbsp;currPopup.billboard = {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image : createPopupCanvas(id, type, name, data);  
&nbsp;&nbsp;&nbsp;&nbsp;};  
&nbsp;&nbsp;}  
}

//creates a canvas element to display some stuff from the data table  
function createPopupCanvas(id, type, name, data) {  
&nbsp;&nbsp;&nbsp;var canvas = document.createElement('canvas');  
&nbsp;&nbsp;&nbsp;var context = canvas.getContext('2d');  
&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;context.fillText(data.stuff1, id, 105, 60);  
&nbsp;&nbsp;&nbsp;context.fillText(data.stuff2, id, 105, 70);  
&nbsp;&nbsp;  
&nbsp;&nbsp;return canvas;  
}

The following contains the console log information that was printed when the issue occurred:

Error in parsing value for ‘image-rendering’. Declaration dropped. index.html  
Error: WebGL: texImage2D: Incurred CPU row conversion, which is slow. Cesium.js:440:27455  
Error: WebGL: texSubImage2D: Incurred CPU row conversion, which is slow. Cesium.js:440:29984  
Error: WebGL: texImage2D: Incurred CPU-side conversion, which is very slow. Cesium.js:440:27694  
Error: WebGL: texImage2D: Incurred CPU pixel conversion, which is very slow. Cesium.js:440:27694  
Error: WebGL: texImage2D: Chosen format/type incurred an expensive reformat: 0x1908/0x1401

Does anyone know a fix for this or has encountered this before?

Also, for reference I am using version 1.27, on firefox, on Ubuntu.

---

<div class="post-metadata">

**Author:** ![johnterrynheq](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@johnterrynheq](https://community.cesium.com/u/johnterrynheq)\
**Post date:** [April 16, 2018, 7:20am UTC](https://community.cesium.com/t/billboard-canvas-turn-black/4991/2 "2018-04-16T07:20:16Z")

</div>

Did you solve it?

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [April 17, 2018, 1:52pm UTC](https://community.cesium.com/t/billboard-canvas-turn-black/4991/3 "2018-04-17T13:52:47Z")

</div>

Hi there,

This seems to be a bug with Firefox, see [https://bugzilla.mozilla.org/show\_bug.cgi?id=1246410](https://bugzilla.mozilla.org/show_bug.cgi?id=1246410). As it is an issue drawing the 2D canvas itself, I don’t think we can do anything in Cesium to workaround it. The best thing to do would be to update that issue with your report.

Thanks,

Gabby