canvas-arbitrary-quads

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());
});