How to pass variable from WidgetBase to .module In Drupal 8 my module looks like this.

&lt;?php

function signature_field_theme() {

  $theme = [];
  $theme['signature'] = [
    'render element' =&gt; 'element',
    'variables' =&gt; array(
      'sign_src' =&gt; NULL,
      'text_area_id' =&gt; NULL,
      ),
  ];
  return $theme;
}

function signature_field_page_attachments_alter(&amp;$page) {
  $page['#attached']['drupalSettings']['signature_field']['sign']['id'] = 'id';
}


My SignatureWidget.php file looks like this...

&lt;?php

namespace Drupal\signature_field\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element;
use Drupal\Core\Render\ElementInfoManagerInterface;

/**
 * Plugin implementation of the 'field_signature_field_widget' widget.
 *
 * @FieldWidget(
 *   id = "field_signature_field_widget",
 *   module = "signature_field",
 *   label = @Translation("Signature Data"),
 *   field_types = {
 *     "field_signature"
 *   }
 * )
 */
class SignatureWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &amp;$form, FormStateInterface $form_state) {

    $value = isset($items[$delta]-&gt;value) ? $items[$delta]-&gt;value : '';

     // 
     //$sign_thumb = array( '#type'   =&gt; 'html_tag',
     //                     '#tag' =&gt; 'img',
     //                     '#attributes' =&gt; array('src' =&gt; '', 'id' =&gt; 'signature_thumb_test', 'class'=&gt;array('align-right'), 'width' =&gt;'120px', 'height' =&gt; '60px' ));

    $field_name = $items-&gt;getName();

    /*function getFieldName() {
      return $field_name;
    }*/

    $text_area_id = 'signature_field_' . $field_name;  

    $file_upload_help = array(
      '#theme' =&gt; 'signature',
      '#sign_src' =&gt; $value,
      '#text_area_id' =&gt; $text_area_id,
    );

    $element += array(
      '#type' =&gt; 'textarea',
      '#default_value' =&gt; $value,
      '#attributes' =&gt; array(
        'id' =&gt; array($text_area_id),
                        ),
      '#attached' =&gt; array(
        'library' =&gt; array('signature_field/signature_pad'),
                        ),
    );
    $element['#attached']['library'][] = 'signature_field/signature_pad';
    $element['#description'] = \Drupal::service('renderer')-&gt;renderPlain($file_upload_help);
    //$element['#suffix'] = \Drupal::service('renderer')-&gt;renderPlain($sign_thumb);

    return array('value' =&gt; $element);
  }

}


How can I pass $text_area_id from the widget to the module in order to use it as a variable in function signature_field_page_attachments_alter
Just incase someone stumbles upon this and struggles to follow the thread above this is how to pass the variable.

$element['#attached']['drupalSettings']['signature_field']['sign']['id'] = $text_area_id;


Here is the full widget code.

&lt;?php

namespace Drupal\signature_field\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element;
use Drupal\Core\Render\ElementInfoManagerInterface;

/**
 * Plugin implementation of the 'field_signature_field_widget' widget.
 *
 * @FieldWidget(
 *   id = "field_signature_field_widget",
 *   module = "signature_field",
 *   label = @Translation("Signature Data"),
 *   field_types = {
 *     "field_signature"
 *   }
 * )
 */
class SignatureWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &amp;$form, FormStateInterface $form_state) {

    $value = isset($items[$delta]-&gt;value) ? $items[$delta]-&gt;value : '';

     // 
     //$sign_thumb = array( '#type'   =&gt; 'html_tag',
     //                     '#tag' =&gt; 'img',
     //                     '#attributes' =&gt; array('src' =&gt; '', 'id' =&gt; 'signature_thumb_test', 'class'=&gt;array('align-right'), 'width' =&gt;'120px', 'height' =&gt; '60px' ));

    $field_name = $items-&gt;getName();

    /*function getFieldName() {
      return $field_name;
    }*/

    $text_area_id = 'signature_field_' . $field_name;  

    $file_upload_help = array(
      '#theme' =&gt; 'signature',
      '#sign_src' =&gt; $value,
      '#text_area_id' =&gt; $text_area_id,
    );

    $element += array(
      '#type' =&gt; 'textarea',
      '#default_value' =&gt; $value,  
      '#attributes' =&gt; array(
        'id' =&gt; array($text_area_id),
                        ),
      '#attached' =&gt; array(
        'library' =&gt; array('signature_field/signature_pad'),
                        ),
    );
    $element['#attached']['library'][] = 'signature_field/signature_pad';
    $element['#description'] = \Drupal::service('renderer')-&gt;renderPlain($file_upload_help);
    $element['#attached']['drupalSettings']['signature_field']['sign']['id'] = $text_area_id;

    return array('value' =&gt; $element);
  }

}


It is then available in your JS as follows.

var canvasId = drupalSettings.signature_field.sign.id;
            console.log(canvasId);