Lens Docs

Appearance

Drawing Radiation Sign ​

Example code ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="300" height="100"></canvas>
    <canvas id="result"></canvas>
    <script type="module" src="main.js"></script>
  </body>
</html>
js
import { distort, VirtualPixelMethod } from "@alxcube/lens";

// create image of black rectangles on yellow background
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffff00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#000";
for (let i = 0; i < 3; i++) {
  ctx.fillRect(i * (canvas.width / 3), 5, canvas.width / 6, 75);
}
ctx.fillRect(0, 85, canvas.width, canvas.height);

// distort created image using Arc distortion to make radiation sign
const { image } = await distort(
  canvas,
  "Arc",
  [
    360, // 360 deg arc for full circle distortion
    90, // Rotate result by 90 deg
  ],
  {
    // Set virtual pixel method to 'HORIZONTAL_TILE_EDGE' for seamless circle and for filling empty space with
    // yellow.
    virtualPixelMethod: VirtualPixelMethod.HORIZONTAL_TILE_EDGE,
  }
);

const resultCanvas = document.querySelector("#result");
resultCanvas.width = image.width;
resultCanvas.height = image.height;
resultCanvas.getContext("2d").drawImage(await image.getResource(), 0, 0);

Result ​

RectanglesRadiationSign