Cesium Image Rotate Causing Strange Zooming In and Out

So, I have tried creating something in Cesium in two different ways with the goal to be having a canvas displayed on the map, and rotate. I’ve tried the route of using an Entity via a RectangleGraphics with a material pointing at a canvas, as well as building my own WebGL shader and using a texture to house the raw image data from an canvas context. Both result in odd zooming in and out of the image upon rotation. I have included some Sandcastle ready code that sort of shows off this strange issue (I’ve seen it in 1.7 and 1.9, and it may have been around earlier).

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var recgraphics;

var rot = 0;

var canvas;

var context;

var image;

var material;

var rect;

var entity;

function addBillboard() {


rect = Cesium.Rectangle.fromDegrees(-86.69777, 30.03883, -76.69777, 40.03883);

canvas = document.createElement(‘canvas’);

canvas.width = 300;

canvas.height = 300;

context = canvas.getContext(‘2d’);

image = new Image(300, 300);

image.src = ‘…/images/whiteShapes.png’;

context.drawImage(image, 0, 0);

material = new Cesium.ImageMaterialProperty();

material.image = canvas;

recgraphics = new Cesium.RectangleGraphics({

coordinates: rect,

material: material,

rotation: 0,

stRotation: 0


entity = new Cesium.Entity();

entity.rectangle = recgraphics;


setTimeout(causeRotate, 100);


function causeRotate() {

context.drawImage(image, 0, 0);

recgraphics.rotation = rot;

recgraphics.stRotation = rot;

if( rot > 6.28 ){

rot = 0;}


rot+= 0.015;}

setTimeout(causeRotate, 100);




text : ‘Add billboard’,

onselect : function() {





Sandcastle.reset = function () {



In the causeRotate function, it slowly rotates the rectangle and the image on the rectangle. I can try only changing one of those two at a time, and I get similar results. Any ideas? Fixing this is really important as I cannot have the image zoom level change when rotating.

Also of note, it flickers like crazy with that Entity option. With the texture/shader path, I had the option of asynchronous on the RectanglePrimitive object (the RectangleGeometry has no such property). And yes, I do need to use the canvas rather than just the image because in my stuff, I have an image stream and so the image is not static and needs to be redrawn on the canvas each time through.

No ideas? Can anyone reproduce the issue I see in SandCastle, at least?

I was able to reproduce both issues. The blinking was caused by how the rotations were being applied and when you were drawing to the context. The Zooming and Shrinking issue is a bug that I’ve opened a case for #2737.

I’m including some code that fixes the flickering and the image loading

Add Billboard


This issue has been fixed in master and will be available in the 1.27 release coming out on November 1st