Canvas size issue when html attribute and css style width & height differs. about pts HOT 4 OPEN

import { CanvasForm, Pt, Bound, Create, Circle } from "pts";

// prepare canvas
const canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 600;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

const form = new CanvasForm(ctx);

// recreate CanvasSpace properties for demonstration
const center = new Pt(canvas.width / 2, canvas.height / 2);
const size = new Pt(canvas.width, canvas.height);
const innerBound = new Bound(new Pt(), size);

// simulate mouse pointer
const pointer = new Pt(100, 100);

let scale = center.$subtract(pointer).divide(center).abs();
let bound = new Bound(new Pt(), size.$add(0, size.y * scale.y));
let cells = Create.gridCells(bound, 21, 30);
let offy = (bound.height - innerBound.height) / 2;
let cy = 1 - Math.abs(center.y - pointer.y) / center.y;

let radial = form.gradient([
  [0.2, `rgba(${70 * cy}, 0, ${255 * cy})`],
  [0.6, `rgba(${205 * cy}, 0, ${30 * cy})`],
  [0.95, `rgba(${255 * cy}, ${220 * cy}, 0)`],
]);

// radial gradient seems to have an issue with 'ctx'
form
  .fill(
    radial(
      Circle.fromCenter(pointer, center.y / 2),
      Circle.fromCenter(pointer, size.y * 1.5)
    )
  )
  .rect(innerBound);

for (let i = 0, len = cells.length; i < len; i++) {
  let grad = form.gradient(["rgba(255,255,255,1)", "rgba(255,255,255,0)"]);
  form
    .fillOnly(i % 2 === 0 ? grad(cells[i]) : "rgba(0,0,0,0)")
    .rect(cells[i].subtract(0, offy));
}