Me inclino por trabajar con objetos de canvas . Tengo las siguientes coordenadas: A: [x1,y1] B: [x2,y2] y un width que es un número. Quiero dibujar un rectángulo en el lienzo usando esta información. Sé que la salida puede ser dos rectángulos a ambos lados del AB. Una forma puede ser encontrar dos líneas que sean perpendiculares a AB y luego, desde cada punto, encontrar otros puntos BC y AD usando el valor de width . ¿Hay alguna solución mejor para eso? Gracias
No necesitas ancho si conoces los vértices de ambos extremos de un rectángulo. El ancho y la altura se pueden obtener restando los vértices del cuadrado. Consulte el siguiente código.
const CANVAS_WIDTH = 400; const CANVAS_HEIGHT = 300; const canvas = Object.assign(document.createElement('canvas'), {width: CANVAS_WIDTH, height: CANVAS_HEIGHT}); const ctx = canvas.getContext('2d'); const A = [10, 30]; const B = [120, 250]; const drawRectByCorner = (ctx, corner1, corner2) => { const [x1, y1] = corner1; const [x2, y2] = corner2; ctx.fillRect(x1, y1, x2 - x1, y2 - y1); // x, y, width, height }; drawRectByCorner(ctx, A, B);