How to use the canvas.createCanvas function in canvas

To help you get started, we’ve selected a few canvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jerch / node-sixel / node_example_encode.js View on Github external
const { sixelEncode, SixelDecoder, introducer, FINALIZER } = require('./lib/index');
const { createCanvas, createImageData } = require('canvas');
const fs = require('fs');
const open = require('open');

// create some canvas
const canvas = createCanvas(204, 202);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// gradient
const gradient = ctx.createLinearGradient(0, 0, 204, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 204, 50);
 
// yellow circle
ctx.strokeStyle = 'yellow';
ctx.beginPath();
ctx.arc(100, 120, 50, 0, 2 * Math.PI);
github jgoralcz / image-microservice / src / workers / canvas / Weeb.js View on Github external
execute: async (images, image) => {
    try {
      // get their image.
      const theirImage = await loadImage(image);

      // use gifencoder
      // create our new accumulator
      const myAccumulator = new MyBufferAccumulator();
      const encoder = new GIFEncoder(imageD, imageD, 'neuquant', false);
      encoder.createReadStream().pipe(myAccumulator);
      encoder.start();
      // encoder.setQuality(30);
      // encoder.setDelay(90);

      // get our canvas and buffer
      const canvas = createCanvas(imageD, imageD);
      const ctx = canvas.getContext('2d');

      // resize their image so we don't have to do it each time.
      const ctxResize = canvas.getContext('2d');
      ctxResize.drawImage(theirImage, 0, 0, imageD, imageD);
      const buffer = canvas.toBuffer('image/jpeg', undefined);
      theirImage.src = Buffer.from(buffer);

      // loop over all images.
      for (let i = 0; i < images.length; i += 1) {
        ctx.globalAlpha = 1;
        const background = new Image();
        background.src = Buffer.from(images[i]);
        ctx.drawImage(background, 0, 0);

        // get buffer and resize our image to our length
github spritejs / sprite-core / test / sprite.js View on Github external
test('draw sprite cached', async (t) => {
  const canvas = createCanvas(300, 300),
    layer = new Layer({context: canvas.getContext('2d')});

  canvas.cloneNode = function () {
    return createCanvas(1, 1);
  };

  const s = new Sprite();
  s.attr({
    pos: [150, 150],
    anchor: 0.5,
    bgcolor: 'red',
    size: [50, 50],
  });
  layer.append(s);

  s.on('mouseenter', (evt) => {
github nodeca / pica / test / pica.js View on Github external
it('Should return result in promise', function () {
    let src = createCanvas();

    src.width = 1000;
    src.height = 1000;

    let to = createCanvas();

    to.width = 100;
    to.height = 100;

    return _pica().resize(src, to).then(result => {
      assert.strictEqual(result, to);
    });
  });
github microsoft / 0xDeCA10B / demo / client / src / ml-models / hot_dog-not / train-classifier.js View on Github external
async function getEmbedding(sample) {
    let result = embeddingCache[sample];
    if (result !== undefined) {
        result = tf.tensor1d(result);
    } else {
        const img = await loadImage(path.join(dataPath, sample));
        const canvas = createCanvas(img.width, img.height);
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        const emb = await encoder.infer(canvas, { embedding: true });
        if (emb.shape[1] !== EMB_SIZE) {
            throw new Error(`Expected embedding to have ${EMB_SIZE} dimensions. Got shape: ${emb.shape}.`);
        }
        result = tf.tidy(_ => {
            let result = emb.gather(0);
            embeddingCache[sample] = result.arraySync();
            if (REDUCE_EMBEDDINGS) {
                result = EMB_MAPPER.dot(result);
            }
            return result;
        });
        emb.dispose();
    }
github LeaPhant / skyblock-stats / renderer.js View on Github external
renderHead: async (url, scale) => {
        let hat_factor = 0.94;

        let canvas = createCanvas(scale * 20, scale * 18.5);
        let hat_canvas = createCanvas(scale * 20, scale * 18.5);
        let hat_bg_canvas = createCanvas(scale * 20, scale * 18.5);
        let head_canvas = createCanvas(scale * 20 * hat_factor, scale * 18.5 * hat_factor);

        let ctx = canvas.getContext('2d');
        let hat = hat_canvas.getContext('2d');
        let hat_bg = hat_bg_canvas.getContext('2d');
        let head = head_canvas.getContext('2d');

        let skin = await loadImage(url);

        let head_top = resize(removeTransparency(getPart(skin, 8, 0, 8, 8, 1)), scale * (hat_factor + 0.01));
        let head_front = resize(removeTransparency(getPart(skin, 8, 8, 8, 8, 1)), scale * (hat_factor + 0.01));
        let head_right = resize(removeTransparency(getPart(skin, 0, 8, 8, 8, 1)), scale * (hat_factor + 0.01));

        let head_top_overlay, head_front_overlay, head_right_overlay, head_back_overlay, head_bottom_overlay, head_left_overlay;
github LeaPhant / flowabot / renderer / render_worker.js View on Github external
function prepareCanvas(size){
        canvas = createCanvas(...size);
        ctx = canvas.getContext("2d");
        resize();
    }