<!DOCTYPE html>
<html>
<body>
<div id="imageContainer">
<canvas id="myCanvas" width="500" height="500" style="image-rendering: pixelated;"></canvas>
</div>
<script>
fetch('/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": "ca1dc29ce5ebc12597737cc7a76239a6d6cbe3af81aab6a946fc1bcf9d6fb41b",
"id": "186",
"a": [
[ 0, deploy.traits.background["brown"].base64 ],
[ 0, deploy.traits.accessories["rainbow"].base64 ],
[ 0, deploy.traits.body["gold-oval"].base64 ],
[ 0, deploy.traits.belly["empty"].base64 ],
[ 0, deploy.traits.face["unimpressed"].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>