And here's my example of drawing a grid with random colours, which you could change to your own colour.
< !DOCTYPE html >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=utf-8" >
< meta name = "viewport"
content = "initial-scale=1, maximum-scale=1,user-scalable=no" >
< title > Shapes and Symbols < /title>
< link rel = "stylesheet"
href = "https://js.arcgis.com/3.20/esri/css/esri.css" >
< style >
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100 % ;
}
button {
display: block;
} < /style>
< script src = "https://js.arcgis.com/3.20/" > < /script> < script >
var map, tb;
require([
"esri/map", "esri/toolbars/draw", "esri/Color", "esri/graphic", "esri/geometry/Polygon",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, Draw, Color, Graphic, Polygon,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
dom, on
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [10, 10],
zoom: 5
});
map.on("load", addSquares);
function addSquares() {
var y = 0,
x = 0;
for (y = 0; y <= 20; y++) {
for (x = 0; x <= 20; x++) {
var polygonJson = {
"rings": [
[
[x, y],
[x + 1, y],
[x + 1, y + 1],
[x, y + 1]
]
],
"spatialReference": {
"wkid": 4326
}
};
var poly = new Polygon(polygonJson);
var fs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 0]), 2),
new Color([parseInt(Math.random() * 255), parseInt(Math.random() * 255), parseInt(Math.random() * 255), 0.6])
);
map.graphics.add(new Graphic(poly, fs));
}
}
}
}); < /script> < /head >
< body >
< div id = "mapDiv" > < /div>
< /body> < /html >