Skip to content

Instantly share code, notes, and snippets.

@salami-art

salami-art/after.js

Last active January 16, 2021 12:21
Show Gist options
  • Save salami-art/b15c3f23945653cc41cfeaafa471908b to your computer and use it in GitHub Desktop.
Save salami-art/b15c3f23945653cc41cfeaafa471908b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
after.js
drawRegularBadge() {
return this.getLayer(this.size.rectWidth, this.size.rectHeight + this.size.bottomSpace).then(ctx => {
this.drawRectangle(ctx, [0, 0], [this.size.rectWidth, this.size.rectHeight], this.style);
// ADD TEXT
this.getLine().then(line => {
if (this.style.midStroke) ctx.drawImage(line.canvas, 0, 0);
this.getSpacedText(this.text).then(drawnText => {
// ADD STROKE LINE
ctx.drawImage(drawnText.canvas, this.cn(this.size.padding), this.cn(this.getTextTop(this.size.rectHeight, this.size.fontSize)));
this.drawTriangle(ctx,
[(this.size.rectWidth - this.size.triangleSize), this.size.rectHeight],
[this.size.rectWidth, this.size.rectHeight],
[(this.size.rectWidth - this.size.triangleSize), (this.size.rectHeight + this.size.triangleSize)],
this.style);
return ctx.canvas;
})
});
});
}
drawRegularBadge().then(canvas => console.log(canvas)); // does not work
Raw
before.js
drawRegularBadge() {
return new Promise( (resolve, reject) => {
this.getLayer(this.size.rectWidth, this.size.rectHeight + this.size.bottomSpace).then(ctx => {
this.drawRectangle(ctx, [0, 0], [this.size.rectWidth, this.size.rectHeight], this.style);
// ADD TEXT
this.getLine().then(line => {
if (this.style.midStroke) ctx.drawImage(line.canvas, 0, 0);
this.getSpacedText(this.text).then(drawnText => {
// ADD STROKE LINE
ctx.drawImage(drawnText.canvas, this.cn(this.size.padding), this.cn(this.getTextTop(this.size.rectHeight, this.size.fontSize)));
this.drawTriangle(ctx,
[(this.size.rectWidth - this.size.triangleSize), this.size.rectHeight],
[this.size.rectWidth, this.size.rectHeight],
[(this.size.rectWidth - this.size.triangleSize), (this.size.rectHeight + this.size.triangleSize)],
this.style);
resolve(ctx.canvas);
})
});
})
});
}
drawRegularBadge().then(canvas => console.log(canvas)); // works
Raw
otherfunct.js
getLine() {
return new Promise( (resolve, reject) => {
this.getLayer(this.size.rectWidth, this.size.rectHeight, {strokeStyle: 'rgba(0, 0, 0, 0.4)', lineWidth: this.cn(1)}).then( ctx => {
ctx.beginPath();
ctx.moveTo( this.cn(this.size.padding), this.cn(this.size.rectHeight/2) );
ctx.lineTo( this.cn(this.size.rectWidth - this.size.padding), this.cn(this.size.rectHeight/2) );
ctx.stroke();
ctx.closePath();
resolve(ctx);
});
});
}
getLayer(x, y, options={}) {
let processedOptions = ['backgroundColor'];
return new Promise( (resolve, reject) => {
resolve(Object.keys(options).sort( (a, b) => processedOptions.includes(a) ? -1 : 1 ).reduce((ctx, c) => {
switch (c) {
case 'backgroundColor':
ctx.fillStyle = options[c];
ctx.fillRect(0, 0, this.cn(x), this.cn(y));
break;
default:
ctx[c] = options[c];
break;
}
return ctx;
}, Canvas.createCanvas(this.cn(x), this.cn(y), this.format).getContext('2d')))
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment