Skip to content

canvas initialize

Jump to bottom
Black Ram edited this page Jan 13, 2025 · 3 revisions

Initialize the canvas

To use the canvas you must first initialize it. This is done by calling the initialize method on the canvas object.

The initialize method takes the following arguments:

  • element: The HTML element to append the canvas to.
  • width: The width of the canvas.
  • height: The height of the canvas.
  • options: This is equivalent to the options you can use when initializing a PixiJS Application.
  • devtoolsOptions: This is equivalent to the options you can use when initializing the PixiJS Devtools.

:::tabs == main.ts

import { canvas } from '@drincs/pixi-vn'

// Canvas setup with PIXI
const body = document.body
if (!body) {
    throw new Error('body element not found')
}

canvas.initialize(body, 1920, 1080, {
    backgroundColor: "#303030"
}).then(() => {
    // ...
})

== index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

:::

Clone this wiki locally