<!DOCTYPE html>
<html>
<body>
  <div id="imageContainer">
    <canvas id="myCanvas" width="500" height="500" style="image-rendering: pixelated;"></canvas>
  </div>

  <script>
    fetch('https://ordinals.com/content/b7205d40f3b1b1486567f0d6e53ff2812983db4c03ad7d3606812cd150c64802i0')
      .then(response => response.json())
      .then(deploy => {
        console.log(deploy);  // Now you can use your JSON data here
        window.deploy = deploy;

        let nfo = {
            "p": deploy.p,
            "op": deploy.op,
            "s": deploy.slug,
            "t_ins": [ "b7205d40f3b1b1486567f0d6e53ff2812983db4c03ad7d3606812cd150c64802i0" ],
            "h": "aa0d33b748e0177528a910a56a61c47bee2ba9b69749228d6520049c0fea3f4f",
            "id": "554",
            "a": [
                [ 0, deploy.traits.background["bitcoin-orange"].base64 ],
                [ 0, deploy.traits.accessories["rainbow"].base64 ],
                [ 0, deploy.traits.body["black-and-white-triangular"].base64 ],
                [ 0, deploy.traits.belly["square"].base64 ],
                [ 0, deploy.traits.face["happy"].base64 ]
            ]
        }

        console.log(nfo);

        // Get the canvas context
        let ctx = document.getElementById('myCanvas').getContext('2d');
        // Disable image smoothing
        ctx.imageSmoothingEnabled = false;

        // For each layer
        for(let i = 0; i < nfo.a.length; i++) {
          let img = new Image();

          // When the image has loaded
          img.onload = function() {
            // Draw the image onto the canvas
            ctx.drawImage(img, 0, 0, 500, 500);
          }

          // Set the source of the image to be the base64 string
          img.src = 'data:image/png;base64,' + nfo.a[i][1];
        }
      })
      .catch(err => console.log(err));  // Log any errors
  </script>
</body>
</html>

<!DOCTYPE html> <html> <body> <div id="imageContainer"> <canvas id="myCanvas" width="500" height="500" style="image-rendering: pixelated;"></canvas> </div> <script> fetch('https://ordinals.com/content/b7205d40f3b1b1486567f0d6e53ff2812983db4c03ad7d3606812cd150c64802i0') .then(response => response.json()) .then(deploy => { console.log(deploy); // Now you can use your JSON data here window.deploy = deploy; let nfo = { "p": deploy.p, "op": deploy.op, "s": deploy.slug, "t_ins": [ "b7205d40f3b1b1486567f0d6e53ff2812983db4c03ad7d3606812cd150c64802i0" ], "h": "aa0d33b748e0177528a910a56a61c47bee2ba9b69749228d6520049c0fea3f4f", "id": "554", "a": [ [ 0, deploy.traits.background["bitcoin-orange"].base64 ], [ 0, deploy.traits.accessories["rainbow"].base64 ], [ 0, deploy.traits.body["black-and-white-triangular"].base64 ], [ 0, deploy.traits.belly["square"].base64 ], [ 0, deploy.traits.face["happy"].base64 ] ] } console.log(nfo); // Get the canvas context let ctx = document.getElementById('myCanvas').getContext('2d'); // Disable image smoothing ctx.imageSmoothingEnabled = false; // For each layer for(let i = 0; i < nfo.a.length; i++) { let img = new Image(); // When the image has loaded img.onload = function() { // Draw the image onto the canvas ctx.drawImage(img, 0, 0, 500, 500); } // Set the source of the image to be the base64 string img.src = 'data:image/png;base64,' + nfo.a[i][1]; } }) .catch(err => console.log(err)); // Log any errors </script> </body> </html>