Skip to content

Instantly share code, notes, and snippets.

@JeanMeche

JeanMeche/garticphone.js

Last active October 26, 2025 19:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JeanMeche/51108e81f1ef61bfb513d0f3f30eb1f6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JeanMeche/51108e81f1ef61bfb513d0f3f30eb1f6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JeanMeche revised this gist Jan 6, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // Run this code when an album is fully display at the end of the game
    (async () => {
    OffscreenCanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
    if (w < 2 * r) r = w / 2;
  2. JeanMeche revised this gist Jan 6, 2021. No changes.
  3. JeanMeche revised this gist Jan 6, 2021. No changes.
  4. JeanMeche revised this gist Jan 5, 2021. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,8 +36,6 @@
    ctx.roundRect(0, 0, offscreenCanvas.width, offscreenCanvas.height, 8);
    ctx.fill();

    ctx.lineJoin = "round";

    ctx.font = "18px Nunito-Black";
    ctx.textBaseline = "top";

  5. JeanMeche revised this gist Jan 5, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    this.arcTo(x, y, x + w, y, r);
    this.closePath();
    return this;
    }
    };

    const items = Array.from(document.getElementsByClassName('item'));

    @@ -68,7 +68,7 @@
    yShift += blockPadding
    });

    const blob = await offscreenCanvas.convertToBlob()
    const blob = await offscreenCanvas.convertToBlob();
    const pngUrl = URL.createObjectURL(blob);
    window.open(pngUrl);
    })();
  6. JeanMeche revised this gist Jan 5, 2021. No changes.
  7. JeanMeche revised this gist Jan 5, 2021. 1 changed file with 70 additions and 26 deletions.
    96 changes: 70 additions & 26 deletions garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +1,74 @@
    (async () => {
    const items = Array.from(document.getElementsByClassName('item'));

    const canvas = Array.from(document.getElementsByTagName('canvas'));
    const canvasWidth = canvas[0].width;
    const totalCanvasHeight = canvas.reduce((acc, cv) => acc + cv.height, 0);

    const answers = Array.from(document.getElementsByClassName('answer'));

    const textHeight= 40;
    const totalHeight = totalCanvasHeight + (answers.length * textHeight);
    const offscreenCanvas = new OffscreenCanvas(canvasWidth, totalHeight);

    let yShift = 0;
    items.forEach((item) => {
    const isDrawing = item.children[0].className.includes('drawing');
    if(isDrawing) {
    const cv = item.getElementsByTagName('canvas')[0];
    const ctx = offscreenCanvas.getContext('2d');
    ctx.drawImage(cv, 0, yShift);
    yShift += cv.height;
    } else {
    yShift += textHeight;
    OffscreenCanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    this.beginPath();
    this.moveTo(x + r, y);
    this.arcTo(x + w, y, x + w, y + h, r);
    this.arcTo(x + w, y + h, x, y + h, r);
    this.arcTo(x, y + h, x, y, r);
    this.arcTo(x, y, x + w, y, r);
    this.closePath();
    return this;
    }
    });

    const blob = await offscreenCanvas.convertToBlob()
    const pngUrl = URL.createObjectURL(blob);
    window.open(pngUrl);
    const items = Array.from(document.getElementsByClassName('item'));

    const canvas = Array.from(document.getElementsByTagName('canvas'));
    const totalCanvasHeight = canvas.reduce((acc, cv) => acc + cv.height, 0);

    const answers = Array.from(document.getElementsByClassName('answer'));
    const textHeight = 30;
    const canvasMargin = 20;
    const blockPadding = canvasMargin;
    const canvasWidth = canvas[0].width;
    const mainCanvasWidth = canvasWidth + (canvasMargin * 2);
    const totalHeight = totalCanvasHeight + (answers.length * textHeight) + (canvasMargin * 2) + ((items.length - 1) * blockPadding);
    const textXStart = 10 + canvasMargin;

    const offscreenCanvas = new OffscreenCanvas(mainCanvasWidth, totalHeight);
    const ctx = offscreenCanvas.getContext('2d');

    var gradient = ctx.createLinearGradient(0, totalHeight, mainCanvasWidth * 1.15, 0 - totalHeight * 0.85);
    gradient.addColorStop(0, '#2ea3cf');
    gradient.addColorStop(1, '#6e1fcf');
    ctx.fillStyle = gradient;
    ctx.roundRect(0, 0, offscreenCanvas.width, offscreenCanvas.height, 8);
    ctx.fill();

    ctx.lineJoin = "round";

    ctx.font = "18px Nunito-Black";
    ctx.textBaseline = "top";

    let yShift = canvasMargin;
    items.forEach((item) => {
    const isDrawing = item.children[0].className.includes('drawing');
    ctx.save();
    if (isDrawing) {
    const cv = item.getElementsByTagName('canvas')[0];
    ctx.roundRect(canvasMargin, yShift, canvasWidth, cv.height, 8);
    ctx.clip();
    ctx.drawImage(cv, canvasMargin, yShift);
    const nick = item.getElementsByClassName('nick')[0].textContent;
    ctx.fillStyle = "#333";
    ctx.fillText(`${nick}`, textXStart, yShift + 8);
    yShift += cv.height;
    } else {
    const nick = item.children[0].children[0].children[0].textContent;
    const text = item.getElementsByClassName('balloon')[0].textContent;
    ctx.fillStyle = "white";
    ctx.roundRect(canvasMargin, yShift, canvasWidth, textHeight, 8);
    ctx.fill();
    ctx.fillStyle = "#333";
    ctx.fillText(`${nick} : ${text}`, textXStart, yShift + 8);
    yShift += textHeight;
    }
    ctx.restore();
    yShift += blockPadding
    });

    const blob = await offscreenCanvas.convertToBlob()
    const pngUrl = URL.createObjectURL(blob);
    window.open(pngUrl);
    })();
  8. JeanMeche revised this gist Jan 5, 2021. 1 changed file with 24 additions and 7 deletions.
    31 changes: 24 additions & 7 deletions garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,30 @@
    const canvas = Array.from(document.getElementsByTagName('canvas'))
    (async () => {
    const items = Array.from(document.getElementsByClassName('item'));

    const canvas = Array.from(document.getElementsByTagName('canvas'));
    const canvasWidth = canvas[0].width;
    const totalHeight = canvas.reduce((acc, cv) => acc + cv.height, 0)
    const totalCanvasHeight = canvas.reduce((acc, cv) => acc + cv.height, 0);

    const answers = Array.from(document.getElementsByClassName('answer'));

    const textHeight= 40;
    const totalHeight = totalCanvasHeight + (answers.length * textHeight);
    const offscreenCanvas = new OffscreenCanvas(canvasWidth, totalHeight);

    const offscreenCanvas = new OffscreenCanvas(canvasWidth, totalHeight)
    canvas.forEach((cv, index) => {
    const ctx = offscreenCanvas.getContext('2d');
    ctx.drawImage(cv, 0, index * cv.height)
    let yShift = 0;
    items.forEach((item) => {
    const isDrawing = item.children[0].className.includes('drawing');
    if(isDrawing) {
    const cv = item.getElementsByTagName('canvas')[0];
    const ctx = offscreenCanvas.getContext('2d');
    ctx.drawImage(cv, 0, yShift);
    yShift += cv.height;
    } else {
    yShift += textHeight;
    }
    });

    const blob = await offscreenCanvas.convertToBlob()
    const pngUrl = URL.createObjectURL(blob);
    window.open(pngUrl);
    window.open(pngUrl);
    })();
  9. JeanMeche revised this gist Jan 5, 2021. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,4 +9,5 @@ canvas.forEach((cv, index) => {
    });

    const blob = await offscreenCanvas.convertToBlob()
    const pngUrl = URL.createObjectURL(blob);
    const pngUrl = URL.createObjectURL(blob);
    window.open(pngUrl);
  10. JeanMeche revised this gist Jan 5, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@ const canvas = Array.from(document.getElementsByTagName('canvas'))
    const canvasWidth = canvas[0].width;
    const totalHeight = canvas.reduce((acc, cv) => acc + cv.height, 0)

    new OffscreenCanvas(canvasWidth, totalHeight)
    const offscreenCanvas = new OffscreenCanvas(canvasWidth, totalHeight)
    canvas.forEach((cv, index) => {
    const ctx = offscreenCanvas.getContext('2d');
    ctx.drawImage(cv, 0, index * cv.height)
  11. JeanMeche created this gist Jan 5, 2021.
    12 changes: 12 additions & 0 deletions garticphone.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    const canvas = Array.from(document.getElementsByTagName('canvas'))
    const canvasWidth = canvas[0].width;
    const totalHeight = canvas.reduce((acc, cv) => acc + cv.height, 0)

    new OffscreenCanvas(canvasWidth, totalHeight)
    canvas.forEach((cv, index) => {
    const ctx = offscreenCanvas.getContext('2d');
    ctx.drawImage(cv, 0, index * cv.height)
    });

    const blob = await offscreenCanvas.convertToBlob()
    const pngUrl = URL.createObjectURL(blob);