Skip to content

Instantly share code, notes, and snippets.

@PavelLaptev

PavelLaptev/generateStripeTexture.js

Created October 13, 2020 13:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PavelLaptev/cd1f31969824ca49387a2f85d8d393c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PavelLaptev/cd1f31969824ca49387a2f85d8d393c7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. PavelLaptev created this gist Oct 13, 2020.
    36 changes: 36 additions & 0 deletions generateStripeTexture.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    export const generateStripeTexture = (
    text,
    colors = { main: "#ffa1a1", second: "blue" }
    ) => {
    const copyAmount = 2;
    const canvasSize = 640;
    const fontSize = canvasSize / copyAmount;
    const fontStyle = `Bold ${fontSize}px Arial`;

    const bitmap = document.createElement("canvas");
    const g = bitmap.getContext("2d");
    g.font = fontStyle;
    bitmap.width = g.measureText(text).width;
    bitmap.height = fontSize * 2;

    const generateTextRow = (shift, i) => {
    // background
    g.fillStyle = Object.values(colors)[i];
    g.fillRect(0, shift * i, bitmap.width, bitmap.height);

    // text
    g.font = `Bold ${fontSize}px Arial`;
    // g.fillStyle = Object.values(colors)[i];
    g.fillText(text, 0, fontSize * i - 40);
    g.fillStyle = Object.values(colors)[0];
    };

    Array(copyAmount + 1)
    .fill(0)
    .forEach((item, i) => {
    generateTextRow(bitmap.height / 2, i);
    });

    // text
    return bitmap;
    };