Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Jan 11, 2021
5 stars
Also listed in…
Image
original = getRandomCanvas()
different = getRandomCanvas()
original.toDataURL() === different.toDataURL()
same = cloneCanvas(original)
original.toDataURL() === same.toDataURL()
function isCanvasEqual(value, other) {
if (value.width !== other.width || value.height !== other.height) {
return false;
}
const valueImageData = value
.getContext('2d')
.getImageData(0, 0, value.width, value.height).data;
const otherImageData = other
.getContext('2d')
.getImageData(0, 0, other.width, other.height).data;
for (let i = 0; i < valueImageData.length; i += 1) {
if (valueImageData[i] !== otherImageData[i]) {
return false;
}
}
return true;
}
isCanvasEqual(original, different)
isCanvasEqual(original, same)
// we test for Uint32 equality
// instead of Uint8 equality, which reduces
// the number of iterations by four if
// the canvas is equal
function canvasUint32(canvas) {
return new Uint32Array(
canvas
.getContext('2d')
.getImageData(0, 0, canvas.width, canvas.height).data.buffer
);
}
function isArrayEqual(value, other) {
if (value.length !== other.length) {
return false;
}
for (let i = 0; i < value.length; i++) {
if (value[i] !== other[i]) {
return false;
}
}
return true;
}
isArrayEqual(canvasUint32(original), canvasUint32(different))
isArrayEqual(canvasUint32(original), canvasUint32(same))
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.
