How to use the roughjs.canvas function in roughjs

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

function doFill(chart, points, mapper, view, color, loop) {
	var count = points.length;
	var span = view.spanGaps;
	var curve0 = [];
	var curve1 = [];
	var len0 = 0;
	var len1 = 0;
	var canvas = rough.canvas(chart.canvas);
	var path = '';
	var i, ilen, index, p0, p1, d0, d1;

	for (i = 0, ilen = (count + !!loop); i < ilen; ++i) {
		index = i % count;
		p0 = points[index]._view;
		p1 = mapper(p0, index, view);
		d0 = isDrawable(p0);
		d1 = isDrawable(p1);

		if (d0 && d1) {
			len0 = curve0.push(p0);
			len1 = curve1.push(p1);
		} else if (len0 && len1) {
			if (!span) {
				path += drawArea(curve0, curve1, len0, len1);

drawBody: function(pt, vm, ctx, opacity) {
		var me = this;
		var bodyFontSize = vm.bodyFontSize;
		var body = vm.body;
		var roughOptions = vm.rough;
		var canvas = rough.canvas(me._chart.canvas);
		var each = helpers.each;
		var options;

		helpers.each = function(loopable, fn) {
			if (loopable === body) {
				each(loopable, function(bodyItem, i) {
					options = roughOptions[i];
					fn.apply(null, arguments);
				});
			} else {
				each.apply(null, arguments);
			}
		};
		ctx.fillRect = function(x, y, width, height) {
			var fillOptions = options.fillOptions;

firstUpdated() {
    this.canvas = this.shadowRoot.getElementById('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.rc = rough.canvas(this.canvas);
    this.slider = this.shadowRoot.getElementById('slider');
    this.fillStyle = this.shadowRoot.getElementById('fillStyleGroup');
    this.strokeShape = this.shadowRoot.getElementById('strokeShape');
    this.colorCombo = this.shadowRoot.getElementById('colorCombo');
    this._draw();
  }

constructor(options) {
    this.canvas = document.querySelector('#canvas');
    this.canvas.width = CANVAS.WIDTH;
    this.canvas.height = CANVAS.HEIGHT;
    this.ctx = this.canvas.getContext('2d');
    this.rough = Rough.canvas(this.canvas);
    this.generator = this.rough.generator;
    this.stage = {};
  }

draw: function() {
		var me = this;
		var globalDefaults = defaults.global;
		var each = helpers.each;
		var drawPoint = helpers.canvas.drawPoint;
		var canvas = rough.canvas(me.chart.canvas);
		var ctx = me.ctx;
		var roughOpts;

		helpers.each = function(loopable, fn) {
			each(loopable, function(legendItem) {
				roughOpts = helpers.extend({
					borderColor: valueOrDefault(legendItem.strokeStyle, globalDefaults.defaultColor),
					borderWidth: valueOrDefault(legendItem.lineWidth, globalDefaults.elements.line.borderWidth),
					backgroundColor: valueOrDefault(legendItem.fillStyle, globalDefaults.defaultColor)
				}, legendItem.rough);

				fn.apply(null, arguments);
			});
		};

		helpers.canvas.drawPoint = function(context, style, radius, x, y, rotation) {

draw: function(chartArea) {
		var me = this;
		var vm = me._view;
		var chart = me._chart;
		var canvas = rough.canvas(chart.canvas);

		if (vm.skip || chartArea !== undefined && !isPointInArea(vm, chartArea)) {
			return;
		}

		roughHelpers.drawPoint(chart.ctx, vm.pointStyle, vm.radius, vm.x, vm.y, vm.rotation, canvas, vm);
	}
});