Skip to content

Commit

Permalink
Merge pull request #3 from pento/smooth-wide-borders
Browse files Browse the repository at this point in the history
Smooth the appearance of wide borders
  • Loading branch information
markus-wa authored Nov 7, 2021
2 parents 14bc832 + 3ab6176 commit c33cff8
Showing 1 changed file with 6 additions and 15 deletions.
21 changes: 6 additions & 15 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,23 @@ import trim from "./trim";
function stickerify(
img: HTMLImageElement,
thickness: number = 1,
fillStyle: string | CanvasGradient | CanvasPattern = "white"
fillStyle: string | CanvasGradient | CanvasPattern = "white",
samples: number = 36
) {
const canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d")!;

const offsetArr = [
[-1, -1],
[0, -1],
[1, -1],
[-1, 0],
[1, 0],
[-1, 1],
[0, 1],
[1, 1],
],
x = thickness + 1, // 1px buffer in case of rounding errors etc.
const x = thickness + 1, // 1px buffer in case of rounding errors etc.
y = thickness + 1;

canvas.width = img.width + 2 * x;
canvas.height = img.height + 2 * y;

for (let i = 0; i < offsetArr.length; i++)
for (let angle = 0; angle < 360; angle += 360 / samples) {
ctx.drawImage(
img,
offsetArr[i][0] * thickness + x,
offsetArr[i][1] * thickness + y
thickness * Math.sin( ( Math.PI * 2 * angle ) / 360 ) + x,
thickness * Math.cos( ( Math.PI * 2 * angle ) / 360 ) + y
);

ctx.globalCompositeOperation = "source-in";
Expand Down

0 comments on commit c33cff8

Please sign in to comment.