CanvasMap
Getting Started Tutorials 3D Reference

Radial Gradient

The code below creates a radial gradient for the background of the map. To achieve this we need to get the context from the view and then setup the gradient. Other types of gradients and how to set them up are documented on the W3Schools web site.

 // this adds a radial gradient to the back of map (the center "glows")
 var TheContext=TheView.TheContext; // get the context to create the gradient
 var TheGradient=TheContext.createLinearGradient(0,0,0,400);
 TheGradient.addColorStop(0,"#ffffcc");
 TheGradient.addColorStop(1,"#ccccff");
 
 var TheGradient = TheContext.createRadialGradient(250, 250, 5,250, 250, 400); // x1,y1,r1,x2,y2,r2 (1=start, 2=end)
 TheGradient.addColorStop(0, "white");
 TheGradient.addColorStop(1, "rgb(200,200,255)");
 
var TheScene=TheMainContainer.GetScene();  
TheScene.TheScene.SetSettings(  
{  	
	Fill:  	
	{  		
		fillStyle:TheGradient	
	},  
});