Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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);
}
});