<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;

// define and set a draw function that draws a black 100x100 rectangle
canvasAnimater.draw = function () {
    
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 100, 100);  
  
}

// 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