JSFiddle - React, Tailwind, and code Playground

by Genius

HTML

<script src="https://raw.github.com/gskinner/EaselJS/master/lib/easel.js"></script>
<!doctype html>
<html>
<head>
<title>Mirror a cached sprite with a bitmap</title>
</head>
<body>
</body>
</html>

JavaScript

var canvas, stage, container, line, copy1, copy2, copy3;

canvas = document.createElement('canvas');
canvas.setAttribute('width', 400);
canvas.setAttribute('height', 400);
document.body.appendChild(canvas);
    
stage = new Stage(canvas);

container = stage.addChild(new Container());
container.cache(0, 0, 100, 100);
container.addChild(new Shape()).graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
container.tick = function () {
    line.rotation += 15;
    
    line.x += line.direction.x;
    line.y += line.direction.y;
    
    (line.x >= 100 || line.x <= 0) && (line.direction.x = -line.direction.x);
    (line.y >= 100 || line.y <= 0) && (line.direction.y = -line.direction.y);
    
    this.updateCache();
};

line = container.addChild(new Shape());
line.graphics.setStrokeStyle(4).beginStroke("#000").moveTo(0, 0).lineTo(100, 100)
    .moveTo(100, 0).lineTo(0, 100).drawRect(0, 0, 100, 100);
line.regX = line.regY = 50;
line.direction = {x: 0.53, y: 0.29};

copy1 = stage.addChild(new Bitmap(container.cacheCanvas));
copy1.x = 200;
copy1.scaleX = -1;

copy2 = stage.addChild(new Bitmap(container.cacheCanvas));
copy2.y = 200;
copy2.scaleY = -1;

copy3 = stage.addChild(new Bitmap(container.cacheCanvas));
copy3.x = copy3.y = 200;
copy3.scaleX = copy3.scaleY = -1;

Ticker.addListener(stage);