Почему метод putImageData библиотеки canvas вырезает пиксели?

twobomb, нашол ответ https://developer.mozilla.org/en-US/docs/Web/API/W...

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 400, 400);
		
	var imgMap = ctx.getImageData(20, 20, 50 , 50);
	
	for(var y=0; y< 50; y++){
		for(var x=0; x<50; x++){
			
			var i = (y*50+x)*4;
			
			imgMap.data[i] = 255;
			imgMap.data[i+1] = 0;
			imgMap.data[i+2] = 0;
			imgMap.data[i+3] = 0;			
		}		
	}
		
   Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(imgMap),
    
  ]).then(function(sprites) {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 20, 20);  
  });

P.S. тоже сначала подумал про canvas.toDataURL()

Почему метод putImageData библиотеки canvas вырезает пиксели?

twobomb, да возможно так придется делать, спасибо за ответ, сначала не понял в чем причина, для меня было странно узнать что он не рисует их сверху а меняет на новые.

Почему метод putImageData библиотеки canvas вырезает пиксели?

twobomb, решил написать небольшой плагин для масштабирования частиизображения, сейчас он только искажает выделенную область, я хочу ее переместить например в другую часть холста, но он вырежет все что под ним, а мне нужно чтобы он нарисовал его сверху просто, сделать как в спрайтах. Может кто-то делал что-то подобное?

Почему метод putImageData библиотеки canvas вырезает пиксели?

почему он не рисует зеленые пиксели, которые под прозрачными, а удаляет их?