Canevas

A small HTML Canvas 2D framework without any dependency.

Check out the docs for more information.

import {
    BasicMaterial, BoxShape, Camera, Canvas, Mesh, Scene
} from 'https://cdn.skypack.dev/canevas';
let canvas, scene, camera;
let shape, material, mesh;
init();
animate();
function init() {
    // Main renderer
    canvas = new Canvas();
    canvas.setSize(window.innerWidth, window.innerHeight);
    // Contains all the meshes to render
    scene = new Scene();
    // Will move into the scene
    camera = new Camera();
    camera.position.set(window.innerWidth / 2, window.innerHeight / 2);
    // Mesh properties
    material = new BasicMaterial({ wireframe: true, color: 0xff0000 });
    shape = new BoxShape({ width: 80, height: 80 });
    // Add mesh to the scene
    mesh = new Mesh(shape, material);
    scene.add(mesh);
    // Append canvas to the body
    document.body.appendChild(canvas.element);
}
function animate() {
    requestAnimationFrame(animate);
    mesh.rotation += 0.02;
    canvas.render(scene, camera);
}