SimpleFillSymbol Vs PictureFillSymbol

SHJang

I am making a drawing button using the ESRI JS samples.
For the drawing, I am using this sample #1:
https://developers.arcgis.com/en/javascript/jssamples/graphics_add.html
In this sample, it uses "PicturFillSymbol" for polygon, extent, and freehand polygon.
I am wondering why it is not working if I use "SimpleFillSymbol" for polygon, extent, and freehand polygon.   I would like to add an editing function from the sample #2 (https://developers.arcgis.com/en/javascript/jssamples/graphics_contextmenu.html) into the sample #1. I assume that if I want to add the editing function I need to use SimpleFillSymbol for polygons.

Could anyone explain why this is not working if I replace this

    var fillSymbol = new PictureFillSymbol(
        "data/stiple.png",
        new SimpleLineSymbol(
        SimpleLineSymbol.STYLE_SOLID,
        new Color('#000'),
            1
          ),
          42,
          42
       );

 

to this
        

       
        var fillSymbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_DOT,
            new Color([151, 249,0,.80]),
            3
            ),
            new Color([151, 249, 0, 0.45])
        );

in the sample #1.

and the full code is here:

         function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }

Many thanks