gxc-solutions/gxc-renderer-canvas-2d
1
0
Fork 0
generated from gxc-solutions/gxc-template-repo
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Release package version 0.0.2
Some checks failed
CI / build (push) Failing after 16s
Details

Browse source 
Added base rendering
This commit is contained in:
Andrey Kernichniy 2026-03-07 23:02:31 +07:00
parent 63818eb2b8
commit a100988848
7 changed files with 587 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

3
playground/index.html
View file

@ -6,7 +6,8 @@
<title>Playground</title>
</head>
<body>
<h1>Hello world!</h1>
<h1>2D Canvas Renderer Playground</h1>
<canvas width="800" height="800" id="canvas"></canvas>
<script type="module" src="./index.ts"></script>
</body>

282
playground/index.ts
View file

@ -1 +1,281 @@
console.warn("Hello world!");
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);