gxc-renderer-canvas-2d/playground/index.ts

import { Canvas2DRenderer } from "./renderer-canvas-2d/canvas-2d-renderer";
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const renderer = new Canvas2DRenderer(canvas);

const image = new Image(100, 100);
image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSX7vk1hi2Qnqbwbkz4t9x-akEeuuHA78H9PA&s";
await new Promise<void>((resolve) => image.addEventListener("load", () => resolve()));

await renderer.render({
  background: {
    type: "solid",
    color: {
      r: 200,
      g: 255,
      b: 255,
      a: 1,
    },
  },
  node: {
    id: "a",
    type: "node",
    children: [
      {
        type: "rectangle",
        blendMode: "source-over",
        fill: {
          type: "solid",
          color: {
            r: 100,
            g: 100,
            b: 100,
            a: 1,
          },
        },
        id: "a",
        name: "test 2",
        opacity: 1,
        rectangle: {
          width: 100,
          height: 100,
          x: 0,
          y: 0,
        },
        stroke: {
          width: 2,
          color: {
            r: 0,
            g: 0,
            b: 0,
            a: 1,
          },
          dash: [],
        },
        transform: {
          rotate: 30,
          scaleX: 1,
          scaleY: 1,
          skewX: 0,
          skewY: 0,
          translateX: 0,
          translateY: 0,
        },
      },
      {
        type: "ellipse",
        blendMode: "source-over",
        ellipse: {
          center: { x: 300, y: 300 },
          radiusX: 30,
          radiusY: 30,
        },
        fill: {
          type: "solid",
          color: {
            r: 150,
            g: 0,
            b: 100,
            a: 1,
          },
        },
        id: "a",
        name: "test ellipse",
        opacity: 0.5,
        stroke: {
          width: 5,
          color: {
            r: 0,
            g: 255,
            b: 0,
            a: 1,
          },
          dash: [],
        },
        transform: {
          scaleX: 1,
          scaleY: 1,
          translateX: 0,
          translateY: 0,
          rotate: 0,
          skewX: 0,
          skewY: 0,
        },
      },
      {
        type: "text",
        blendMode: "source-over",
        text: "Hello world",
        font: {
          font: "serif",
          color: {
            r: 255,
            g: 0,
            b: 0,
            a: 1,
          },
          size: 72,
        },
        textStroke: {
          color: {
            r: 100,
            g: 200,
            b: 0,
            a: 1,
          },
          dash: [],
          width: 0,
        },
        rectangle: {
          x: 150,
          y: 150,
          width: 100,
          height: 100,
        },
        fill: {
          type: "solid",
          color: {
            r: 150,
            g: 0,
            b: 100,
            a: 1,
          },
        },
        id: "a",
        name: "test ellipse",
        opacity: 0.5,
        stroke: {
          width: 5,
          color: {
            r: 0,
            g: 255,
            b: 0,
            a: 1,
          },
          dash: [],
        },
        transform: {
          scaleX: 1,
          scaleY: 1,
          translateX: 0,
          translateY: 0,
          rotate: 30,
          skewX: 0,
          skewY: 0,
        },
      },
      {
        type: "image",
        blendMode: "source-over",
        source: image,
        fill: {
          type: "solid",
          color: {
            r: 100,
            g: 100,
            b: 100,
            a: 1,
          },
        },
        id: "a",
        name: "test 2",
        opacity: 1,
        rectangle: {
          width: 200,
          height: 200,
          x: 300,
          y: 300,
        },
        stroke: {
          width: 2,
          color: {
            r: 0,
            g: 0,
            b: 0,
            a: 1,
          },
          dash: [],
        },
        transform: {
          rotate: -15,
          scaleX: 1,
          scaleY: 1,
          skewX: 0,
          skewY: 0,
          translateX: 0,
          translateY: 0,
        },
      },
    ],
    name: "test",
    transform: {
      rotate: 0,
      scaleX: 1,
      scaleY: 1,
      skewX: 0,
      skewY: 0,
      translateX: 0,
      translateY: 0,
    },
  },
  selection: {
    id: "",
    type: "node",
    name: "",
    children: [],
    transform: {
      rotate: 0,
      scaleX: 1,
      scaleY: 1,
      skewX: 0,
      skewY: 0,
      translateX: 0,
      translateY: 0,
    },
  },
  spotlight: [],
  static: [
    {
      type: "rectangle",
      blendMode: "source-over",
      fill: {
        type: "solid",
        color: {
          r: 255,
          g: 255,
          b: 255,
          a: 0,
        },
      },
      id: "",
      name: "",
      opacity: 1,
      rectangle: {
        width: 500,
        height: 500,
        x: 0,
        y: 0,
      },
      stroke: {
        width: 2,
        color: {
          r: 255,
          g: 0,
          b: 0,
          a: 1,
        },
        dash: [],
      },
      transform: {
        rotate: 0,
        scaleX: 1,
        scaleY: 1,
        skewX: 0,
        skewY: 0,
        translateX: 0,
        translateY: 0,
      },
    },
  ],
});

console.warn(renderer);