Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

canvas-arbitrary-quads

1.0.0 • Public • Published

Description

Map canvas image quad to another using bilinear interpolation or 3D perspective transformation

This package is Shaun Lebron's article adaptation for NPM https://observablehq.com/@shaunlebron/texture-drawing-for-html-canvas

Usage example

Node.js environment

import { createCanvas, loadImage } from 'canvas';
import { drawArbitraryQuadImage, FILL_METHOD } from 'canvas-arbitrary-quads';
 
const canvas = createCanvas(256, 256);
const ctx = canvas.getContext('2d');
 
const srcPoints = [
  { x: 0, y: 0 },
  { x: 0, y: 255 },
  { x: 255, y: 255 },
  { x: 255, y: 0 },
];
 
const dstPoints = [
  { x: 128, y: 64 },
  { x: 255, y: 128 },
  { x: 128, y: 192 },
  { x: 0, y: 128 },
];
 
loadImage('PATH_TO_IMAGE').then(image => {
  drawArbitraryQuadImage(ctx, image, srcPoints, dstPoints, FILL_METHOD.BILINEAR);
 
  console.log(canvas.toDataURL());
});

Install

npm i canvas-arbitrary-quads

DownloadsWeekly Downloads

5

Version

1.0.0

License

MIT

Unpacked Size

49.4 kB

Total Files

22

Last publish

Collaborators

  • avatar