<script src="https://assets.codepen.io/3560077/CanvasAnimater.js"></script>
<canvas id="myCanvas"></canvas>
<script src="./script.js"></script>

// create a CanvasAnimater object that targets a canvas element with id='myCanvas'
let canvasAnimater = new CanvasAnimater('myCanvas');

// get the '2D' rendering canvas context
let ctx = canvasAnimater.context;

// set the canvas width and height dimensions to 300x300
canvasAnimater.size(300,300)

// center the canvas in the window
canvasAnimater.center();

// define and set a draw function that fills the entire canvas with a black rectangle
canvasAnimater.draw = function () {
    
    let W = canvasAnimater.width;
    let H = canvasAnimater.height;
    
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, W, H);  
}

// render the animation
canvasAnimater.animate();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://github.com/smtsjhr/CanvasAnimater.js/blob/6ecb4d5ea3f5d36d3abcdd6c8338d9ccf42638e4/CanvasAnimater.js