Custom drawing on globe surface

Hi, I would like to know, can i use some webgl code for drawing on earth globe surface?
Something like this:
var ctx = this.canvas.getContext('2d');
var g = ctx.createRadialGradient(x, y, 0, x, y, radius);
var a = 1 / 10;
g.addColorStop(0, 'rgba(255,255,255,' + a + ')');
g.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = g;
ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);

It depends on what you want to do. If you want to draw lines/polygons/shapes on the earth surface, you can do that using the Entity API, see this tutorial

If you want to draw custom imagery on a per-tile basis, then you want a custom imagery provider, but I’m guessing that’s not what you want.

You might also be interested in this example for interactive drawing. Code is available here:

Thanks for reply. I just want add simple heatmap API for CesiumJS. As I understand it, this can't be done with entities.

If all you are doing is generating an image and drawing it on the globe, you can absolutely do it with entities by using a polygon or rectangle and assigning the material the generated canvas. I’ve actually been meaning to prototype something like that with heatmap.js for a while.

So, how can i get canvas context and globe surface for drawing circle entities with radial gradient?

Sounds like you want to create your own imagery provider, I just responded to a similar question in this thread:

If that’s not what you want, you can just create a canvas out of this air, draw on it, and then assign it as the material for any polygon you want, which is discussed in the tutorial I previously linked to up thread.

Yes, i did my own ImageryProvider. How can i add my class to cesium or rebuild cesium.js with my sources?

There’s no need to rebuild Cesium unless you are working on a standard implementation that you want to submit back to Cesium. You just include your imagery provider with the rest of your application code.

I get "Uncaught SyntaxError: Unexpected token . index.html:1" when i include my imagery provider.

index.html code:

HeatmapImageryProvider.js code:

What i'm doing wrong?