Public
Edited
Jul 3, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
return Promise.all([promise1, promise2, promise3]).then((values) =>
getCanvas(...values, op1, op2, alpha1, alpha2)
);
Promise.all([promise1, promise2, promise3]).catch((value) => {
console.log(value);
});
}
Insert cell
promise1 = promisedImage()
Insert cell
promise2 = promisedImage()
Insert cell
promise3 = promisedImage()
Insert cell
getCanvas = (image1, image2, image3, op1, op2, alpha1 = 0.5, alpha2 = 0.5) => {
const canvas = document.createElement("canvas");
canvas.width = image1.width;
canvas.height = image1.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image1, 0, 0, image1.width, image1.height);
ctx.globalCompositeOperation = op1;
ctx.globalAlpha = alpha1;
ctx.drawImage(image2, 0, 0, image1.width, image1.height);
ctx.globalCompositeOperation = op2;
ctx.globalAlpha = alpha2;
ctx.drawImage(image3, 0, 0, image1.width, image1.height);
return canvas;
}
Insert cell
promisedImage = () =>
new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.crossOrigin = "anonymous";
image.src = faker.image.url();
})
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more