dom-canvas
Leveraging the power of CSS and the DOM to create a faster, more powerful canvas.
What is this?
dom-canvas
is a library that imitates the 2D Canvas API, except implements it using CSS animations and DOM elements. This means that no re-renders are necessary, as every element (shape, text, etc) has its own object and properties.
Additionally, dom-canvas
is easier to debug, as each visual change is a change to an HTML element, which is automatically represented in your browser's developer tools.
License / Distribution
dom-canvas
is distributed through NPM as an ES module. It has zero dependencies, but requires TypeScript for development.
dom-canvas
is licensed under the MIT License.
Get Started!
There are two ways to get started with dom-canvas
.
- NPM: (recommended method)
npm i dom-canvas
.
;/* OR */;
- CDN: (faster to get up and running).
;
Initializing a Canvas
Let's say that your HTML includes the following <div>
:
To initialize a canvas you create a new DOMCanvas.Canvas
:
; const canvas = "#canvas";
Now, this canvas
is useless in it's current state, so let's style it to be blue and fit the page:
Canvas Elements
Everything (almost), from shapes to text, are instances the DOMCanvas.Element
class. This section assumes that the code from the last section is still present.
Regardless of what you want to 'render', be it a rectangle, text, or an image you call the DOMCanvas.Element
constructor.
Rectangle
const rect = x: 100 /* Offset left = 100px */ y: 100 /* Offset top = 100px */ width: 100 height: 100 /* 100x100 rect */ background: "red" /* Red fill */ border: "white 2px solid" /* 2px solid white stroke */; // Render the rectangle to the canvas:canvas;
Ellipse
An ellipse is identical to a rectangle, except you set ellipse: true
.
const ellipse = x: 150 y: 150 width: 100 height: 100 background: "green" border: "white 2px solid" ellipse: true /* New code */; canvas;
Text
To render text, you must supply x
and y
, along with text
and textColor
(and optionally font
). By default, text will be responsive to screen size (wrap when screen is too small), but using width
and height
properties you can stop this.
const text = x: 10 y: 10 text: "Hello from dom-canvas!" /* Text to show */ textColor: "blue" /* Color of the text */ font: "30px sans-serif" /* Font */; canvas;
Element
Exceptions
Non-While rectangles, ellipses, and text are all direct instances of DOMCanvas.Element
, some
Image:
Images have their own class, DOMCanvas.Image
. Since the class extends from DOMCanvas.Element
, all properties passable in the Element
class are accepted when creating an Image
.
const image = image: "http://placekitten.com/g/200/300" /* New property! */ x: 300 y: 350 border: "2px solid white"; canvas;
Event Handling
DOMCanvas.Canvas
, DOMCanvas.Element
(and classes that inherit it) all have the same API for event handling. The on
method takes the same parameters as the addEventListener
function.
DOMCanvas.Canvas
Adding Events to The following code will make it so that when the canvas is clicked, 'Canvas Clicked!' will be alerted to the screen.
canvas;
DOMCanvas.Element
Adding Events to This following method works on DOMCanvas.Element
and all classes that extend it, such as DOMCanvas.Image
const rect = x: 0 y: 0 width: 10 height: 100 background: "red"; rect;canvas;
Other Stuff:
Check If Key Pressed:
You can check if a key is down on a canvas using its isPressed
method. The next example shows key-controlled movement without setting any event listeners:
// Player to be moved:const player = x: 0 y: 0 width: 50 height: 100 background: "white";canvas; { // Move rectangle if W, A, S, D pressed. if canvas playery -= 10; if canvas playerx -= 10; if canvas playery += 10; if canvas playerx += 10; // Call function again on next animation frame: ;} // Call update function:;