<!DOCTYPE html>
<html>
<head></head>
<body>
  <canvas id="myCanvas" width="512" height="256"></canvas>
  <div id="log"></div>
</body>
<script>
const offscreenCanvas = new OffscreenCanvas(256, 256);
ctx = offscreenCanvas.getContext("2d");

offscreenCanvas.width = 512;
ctx.translate(120, 60);
ctx.scale(2, 1);
ctx.rotate(Math.PI/8);

ctx.fillStyle = "#ff00aa";
ctx.fillRect(-40, -40, 40, 40);
ctx.fillStyle = "#ffaa00";
ctx.fillRect(0, -40, 40, 40);
ctx.fillStyle = "#00aaff";
ctx.fillRect(0, 0, 40, 40);
ctx.fillStyle = "#00ff00";
ctx.fillRect(-40, 0, 40, 40);

const canvas = document.getElementById("myCanvas");
var ctx2 = canvas.getContext("2d");
ctx2.drawImage(offscreenCanvas, 0, 0, 512, 256);
</script>
</html>