file browser

js/j16canvas.php

<html>
 <head>
  <title> <?php echo basename(__file__, '.php'); ?> </title>
    <script type="text/javascript">
        function rubik(ctx, tlX, tlY, cc) {
            const s = 12, w=1;
            const face = [[3*s+4*w,3*s+4*w], [3*s+4*w, 6*s+6*w], [6*s+6*w,3*s+4*w],[3*s+4*w, 2*w], [2*w, 3*s+4*w], [9*s+8*w, 3*s+4*w]];
            const cell = [[0,2], [1,2], [2,2],[2,1], [2,0], [1, 0], [0,0], [0,1], [1,1]];
            const col = ['red', 'yellow', 'blue', 'white', 'green', 'orange'];
            const orient = ['?', "\u{2193}", '?', "\u{2192}", '?', "\u{2191}", '?', "\u{2190}", '?'];
            ctx.lineWidth = 2*w;
            ctx.strokeType = "black";
            ctx.strokeRect(tlX+w, tlY+3*s+3*w, 12*s+8*w, 3*s+2*w);
            ctx.strokeRect(tlX+3*s+3*w, tlY+w, 3*s+2*w, 9*s+6*w);
            ctx.strokeRect(tlX+9*s+7*w, tlY+3*s+3*w, 3*s+2*w, 3*s+2*w);
            for (let f = 0; f < 6; f++) {
                f9 = f * 9;
                x = tlX + face[f][0];
                y = tlY + face[f][1];
                for (let i = 0; i < 9; i++) {
                    ctx.fillStyle = col[(i==8 ? f : cc[f9+i])];
                    ctx.fillRect(x+s*cell[i][0], y+s*cell[i][1], s, s);
                }
                ctx.fillStyle = 'black';
                ctx.font = "15px Arial ExtraBold";
                ctx.fillText(orient[cc[f9+8]], x+s*cell[8][0], y+s+s*cell[8][1], s);
            }
        } 
        ca = [['canvas', '000000007111111111222242227333354535444444233555535351']]; 
        window.onload = function () {
                            for (const c of ca) 
                                rubik(document.getElementById(c[0]).getContext("2d"), 2, 2, c[1]);
                        };

</script>
 </head>
<body>
<h1>canvas</h1>
<p style="line-height: 170px;height: 170px;">nein
abc<canvas id="canvas" width="160" height="120" onload="drawit(event)"></canvas>efg
<h1>Source <?php echo __file__; ?> </h1> ja
<?php highlight_file(__file__) ?>
 </body>
</html>