How to use roughjs - 10 common examples

initRoughObjects() {
    this.roughSvg = document.getElementById(this.roughId);
    this.rcAxis = rough.svg(this.roughSvg,
      {options: {
        strokeWidth: this.axisStrokeWidth,
        roughness: this.axisRoughness,
      },
      });
    this.rc = rough.svg(this.roughSvg, {
      options: {
        // fill: this.color,
        stroke: this.stroke === 'none' ? undefined : this.stroke,
        strokeWidth: this.strokeWidth,
        roughness: this.roughness,
        bowing: this.bowing,
        fillStyle: this.fillStyle,
      },
    });
  }

initRoughObjects() {
    this.roughSvg = document.getElementById(this.roughId);
    this.rcAxis = rough.svg(this.roughSvg,
      {options: {
        strokeWidth: this.axisStrokeWidth,
        roughness: this.axisRoughness,
      },
      });
    this.rc = rough.svg(this.roughSvg, {
      options: {
        // fill: this.color,
        stroke: this.stroke === 'none' ? undefined : this.stroke,
        strokeWidth: this.innerStrokeWidth,
        roughness: this.roughness,
        bowing: this.bowing,
        fillStyle: this.fillStyle,
      },
    });
  }

componentDidMount() {
    const width = this.props.diameter + 5; // pad by 5 to account for Rough stroke
    const height = this.props.diameter + 5; // pad by 5 to account for Rough stroke
    const x = width / 2;
    const y = height / 2;

    this.canvas = document.querySelector('#' + this.canvasId);
    this.canvas.width = width;
    this.canvas.height = height;
    this.ctx = this.canvas.getContext('2d');
    this.rough = Rough.canvas(this.canvas);
    this.rough.circle(x, y, this.props.diameter, this.props.options);

    if (this.props.animate) {
      this.interval = setInterval(() => {
        this.ctx.clearRect(0, 0, width, height);
        this.rough.circle(x, y, this.props.diameter, this.props.options);
      }, 100);
    }
  }

function main() {
  const textarea = document.querySelector('#textarea')!;
  const canvas = document.querySelector('#canvas')!;
  const rc = rough.canvas(canvas);
  const nameInput = document.querySelector('#name')!;
  const canvasContainer = document.querySelector('#canvas-container')!;
  const draw = rafThrottle(() => drawDiagram(textarea.value, rc, canvas, canvasContainer));

  document.querySelector('#save')!.onclick = () => {
    // TODO: choose resolution?
    canvas.toBlob(blob => {
      const url = URL.createObjectURL(blob);
      const anchor = document.createElement('a');
      anchor.setAttribute('download', nameInput.value);
      anchor.href = url;
      setTimeout(() => {
        URL.revokeObjectURL(url);
      }, 1000);
      anchor.click();
    }, 'image/png');

draw: function() {
		var me = this;
		var vm = me._view;
		var spanGaps = vm.spanGaps;
		var points = me._children.slice(); // clone array
		var lastDrawnIndex = -1;
		var index, current, previous, currentVM;
		var canvas = rough.canvas(me._chart.canvas);
		var path = '';

		// If we are looping, adding the first point again
		if (me._loop && points.length) {
			points.push(points[0]);
		}

		// Stroke Line
		lastDrawnIndex = -1;

		for (index = 0; index < points.length; ++index) {
			current = points[index];
			previous = Chart.helpers.previousItem(points, index);
			currentVM = current._view;

			// First point moves to it's starting position no matter what

_init(config) {
    this.gen = new RoughGenerator(config, this.layer.frame);
  }

React.useEffect(() => {
    setValue({
      root: ref.current,
      rough: roughjs.svg(ref.current, props.config),
    })
  }, [ref.current, config])
  return (

initRoughObjects() {
    this.roughSvg = document.getElementById(this.roughId);
    this.rcAxis = rough.svg(this.roughSvg,
      {options: {
        strokeWidth: this.axisStrokeWidth,
        roughness: this.axisRoughness,
      },
      });
    this.rc = rough.svg(this.roughSvg, {
      options: {
        fill: this.color,
        stroke: this.stroke === 'none' ? undefined : this.stroke,
        strokeWidth: this.innerStrokeWidth,
        roughness: this.roughness,
        bowing: this.bowing,
        fillStyle: this.fillStyle,
      },
    });
  }

initRoughObjects() {
    this.roughSvg = document.getElementById(this.roughId);
    this.rcAxis = rough.svg(this.roughSvg,
      {options: {
        strokeWidth: this.axisStrokeWidth,
        roughness: this.axisRoughness,
      },
      });
    this.rc = rough.svg(this.roughSvg, {
      options: {
        fill: this.color,
        stroke: this.stroke === 'none' ? undefined : this.stroke,
        strokeWidth: this.innerStrokeWidth,
        roughness: this.roughness,
        bowing: this.bowing,
        fillStyle: this.fillStyle,
      },
    });
  }

initRoughObjects() {
    this.roughSvg = document.getElementById(this.roughId);
    this.rcAxis = rough.svg(this.roughSvg,
      {options: {
        strokeWidth: this.axisStrokeWidth,
        roughness: this.axisRoughness,
      },
      });
    this.rc = rough.svg(this.roughSvg, {
      options: {
        fill: this.color,
        stroke: this.stroke === 'none' ? undefined : this.stroke,
        strokeWidth: this.innerStrokeWidth,
        roughness: this.roughness,
        bowing: this.bowing,
        fillStyle: this.fillStyle,
      },
    });
  }