<!DOCTYPE html>

<html>

<body>

</div>

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": "ad82a097c19a5d349ab99db3ad9102caf624486702d9a147f4d3003162b90222",

"id": "1",

"a": [

[0, deploy.traits.background["blue"].base64],

[0, deploy.traits.accessories["antenna"].base64],

[0, deploy.traits.body["standard-oval"].base64],

[0, deploy.traits.belly["empty"].base64],

[0, deploy.traits.face["neutral"].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>