Codex owl

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 500, 500);
ctx.fillStyle = '#00FF00';
ctx.fillRect(100, 100, 300, 300);
ctx.fillStyle = '#0000FF';
ctx.fillRect(200, 200, 100, 100);
ctx.fillStyle = '#000000';
ctx.fillRect(250, 250, 50, 50);
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(275, 275, 25, 25);
ctx.fillStyle = '#000000';
ctx.fillRect(275, 275, 5, 5);
ctx.fillRect(295, 275, 5, 5);
ctx.fillRect(275, 295, 5, 5);
ctx.fillRect(295, 295, 5, 5);
ctx.fillRect(285, 285, 5, 5);
ctx.fillRect(285, 295, 5, 5);
ctx.fillRect(285, 305, 5, 5);
ctx.fillRect(295, 285, 5, 5);
ctx.fillRect(305, 285, 5, 5);
ctx.fillRect(295, 305, 5, 5);
ctx.fillRect(305, 305, 5, 5);
ctx.fillRect(305, 295, 5, 5);
ctx.fillRect(285, 285, 5, 5);
ctx.fillRect(285, 295, 5, 5);
ctx.fillRect(285, 305, 5, 5);
ctx.fillRect(295, 285, 5, 5);
ctx.fillRect(305, 285, 5, 5);
ctx.fillRect(295, 305, 5, 5);
ctx.fillRect(305, 305, 5, 5);
ctx.fillRect(305, 295, 5, 5);
ctx.fillRect(285, 285, 5, 5);
ctx.fillRect(285, 295, 5, 5);
ctx.fillRect(285, 305, 5, 5);
ctx.fillRect(295, 285, 5, 5);
ctx.fillRect(305, 285, 5, 5);
ctx.fillRect(295, 305, 5, 5);
ctx.fillRect(305, 305, 5, 5);
ctx.fillRect(305, 295, 5, 5);
ctx.fillRect(285, 285, 5, 5);
ctx.fillRect(285, 295, 5, 5);
ctx.fillRect(285, 305, 5, 5);
ctx.fillRect(295, 285, 5, 5);
ctx.fillRect(305, 285, 5, 5);
ctx.fillRect(295, 305, 5, 5);
ctx.fillRect(305, 305, 5, 5);
ctx.fillRect(305, 295, 5, 5);
ctx.fillRect(285, 285, 5, 5);
ctx.fillRect(285, 295, 5, 5);
ctx.fillRect(285, 305, 5, 5);
ctx.fillRect(295, 285, 5, 5);
ctx.fillRect(305, 285, 5, 5);
ctx.fillRect(295, 305, 5, 5);
ctx.fillRect(305, 305, 5, 5);
ctx.fillRect(305, 295, 5, 5);
ctx.fillRect(285, 285, 5, 5);
ctx.fillRect(285, 295, 5, 5);
ctx.fillRect(285, 305, 5,...