Динамический канвас в Linkedin challenge

[GP]

Мне интересно кто нибудь изучал для чего линкед ин генерит динамические картинки в своем challenge:

Код по большей части один и тот же, просто меняют цвет:

Пример кода:

   var canvas = document.createElement("canvas");
   canvas.width = 100;
   canvas.height = 100;
   var context = canvas.getContext('2d');
   context.fillStyle = "black";
   context.fillRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   context.clearRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   context.fillRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   context.strokeRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   context.beginPath();
   context.moveTo(50.0000000000,50.0000000000);
   context.closePath();
   context.fill("nonzero");
   context.beginPath();
   context.moveTo(0.0000000000,0.0000000000);
   context.lineTo(100.0000000000,0.0000000000);
   context.lineTo(100.0000000000,100.0000000000);
   context.lineTo(0.0000000000,100.0000000000);
   context.fill("nonzero");
   context.beginPath();
   context.arc(50.0000000000,50.0000000000,50.0000000000,0.0000000000,6.2831853072,true);
   context.stroke();
   context.fill("nonzero");
   context.beginPath();
   context.moveTo(0.0000000000,0.0000000000);
   context.quadraticCurveTo(25.0000000000,25.0000000000,25.0000000000,62.5000000000);
   context.bezierCurveTo(75.0000000000,37.0000000000,70.0000000000,25.0000000000,50.0000000000,25.0000000000);
   var _Path2D = new Path2D();
   _Path2D.arc(50.0000000000,50.0000000000,50.0000000000,0.0000000000,6.2831853072,false);
   context.fill(_Path2D,"nonzero");
   context.fillStyle = "rgba(216, 126, 100, -1)";
   context.fillRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   context.shadowOffsetX = 2.0000000000;
   context.shadowOffsetY = 2.0000000000;
   context.shadowBlur = 2.0000000000;
   context.shadowColor = "rgba(225, 50, 127, 0)";
   context.font = "20px Arial";
   context.fillStyle = "rgba(2, 44, 210, 0)";
   context.fillText("Hel$&?6%){mZ+#@👺",200.0000000000,200.0000000000);
   context.rotate(0.4363323130);
   context.rotate(-0.4363323130);
   context.transform(100.0000000000,100.0000000000,-100.0000000000,100.0000000000,0.0000000000,0.0000000000);
   context.fillStyle = "rgba(228, 153, 10, 0)";
   context.fillRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   context.resetTransform();
   context.transform(1.0000000000,0.0000000000,0.0000000000,1.0000000000,0.0000000000,0.0000000000);
   context.fillStyle = "black";
   context.fillRect(0.0000000000,0.0000000000,100.0000000000,100.0000000000);
   var str = canvas.toDataURL("image/png");
   var hex = '';
   for(var i=0;i<str.length;i++) {
      var add = str.charCodeAt(i).toString(16);
      if(add.length == 1)
      {
         hex += '0';
      }
      if(add.length == 0)
      {
         hex += '00';
      }
      hex += add;
   }
   return Promise.resolve(hex);

[basuser123]

понятно же чтобы ему х,ню не подсовывали отрисованную. (я бы тоже так и делал)
но судя по камментам на этом форуме санта клауса не существует, поэтому забей и иди на сайты которе не смотрят на канвас \вангую что тебе напишут как-то так))
а ну или другой вариант - отправят сюда https://wiki.bablosoft.com/doku.php?id=ru:perfectcanvas
где написан такой баян
"Может ли «запрос PerfectCanvas» меняться постоянно?
Если «запрос PerfectCanvas» меняется при каждом посещении сайта, это означает, что сайт не сможет создать базу данных для анализа аутентичности. Таким образом, методы определения уникальности данных canvas не могут быть использованы. В этом случае добавление шума в изображение будет достаточно. Также есть вероятность, что canvas на таком сайте не используется для получения отпечатка."
Правильно, зачем думать, все ж "ответы" есть?))

[GP]

Санта клауза нету, но Гринч пришел в топик и ответил, спасибо XD Интересно то, что каждый из канвасов еще пару раз рисуется. Возможно тест на производительность какой то... На нойз тест попроще был бы, как раз нашел недавно себе:

function testKnownPixelValue(size, log){
	"use strict";
	
	const canvas = document.createElement("canvas");
	canvas.height = size;
	canvas.width = size;
	const context = canvas.getContext("2d");
	const imageData = new ImageData(canvas.width, canvas.height);
	const pixelValues = imageData.data;
	for (let i = 0; i < imageData.data.length; i += 1){
		if (i % 4 !== 3){
			pixelValues[i] = Math.floor(256 * Math.random());
		}
		else {
			pixelValues[i] = 255;
		}
	}
	context.putImageData(imageData, 0, 0);
	const p = context.getImageData(0, 0, canvas.width, canvas.height).data;
	for (let i = 0; i < p.length; i += 1){
		if (p[i] !== pixelValues[i]){
			log("wrong value", p[i], "at", i, "expected", pixelValues[i]);
			return true;
		}
	}
	return false;
}
testKnownPixelValue(10, console.log)