Add an option to use html5 canvas as a rectangle material

[cesium-user2]

Canvas has very useful capabilities and it would be great to be able to use it directly as a material.

I thought of Something like this:

var entity = viewer.entities.add({...});
var canvas= document.querySelector('#canvas');
entity.rectangle.material=canvas;

For now one can use code that looks like this:

var entity = viewer.entities.add({...});
var canvas= document.querySelector('#canvas');
entity.rectangle.material=canvas.toDataURL();

but this way is not very efficient...

[mramato]

I'm surprised this doesn't work already, but I agree we should support it.

[alberto-acevedo]

I would like to know the status of supporting canvas with rectangle geometries. The use of canvas. in materials instead of toDataURL() will greatly improve the performance of my Cesium application.

Thanks,

Alberto

[mramato]

@alberto-acevedo thanks for the reminder. You caught me on a good day so I was able to open up #2667 which adds this capability.

[alberto-acevedo]

I just tried the new tml5 canvas as a rectangle material capability but there seems to be a problem when rendering more than one canvas. The first time I render a canvas it works fine. But when I tried to render a different canvas, what is rendered is the first canvas. Is it something I'm doing wrong or is this a bug? My code is below:

var multiPointRectangle = new Cesium.RectangleGraphics();
var multiPointMaterial = new Cesium.ImageMaterialProperty();
multiPointMaterial.image = canvas1; //Do not works fine in subsequent calls with different canvas object
//multiPointMaterial.image = canvas1.toDataURL(); //--> works fine in subsequent calls with different canvas object
multiPointRectangle.material = multiPointMaterial ;
multiPointRectangle.coordinates = ....

var entity = new Cesium.Entity();
entity. _id = "someId";
entity.rectangle = multiPointRectangle;
.... add entity to the viewer entity collection

[mramato]

You might be running into the issue described in #2633. I'll see if I can reproduce and confirm.