Старые данные о холсте все еще там после изменения размера

Question

Я создаю холст и загружаю данные пикселей в определенных местах пикселей следующим образом.

let maskCanvas = document.createElement("canvas");
let patchWidth = 30;
let patchHeight = 30;
let scale = 3;  //scale up the canvas by 3 times
maskCanvas.setAttribute("class", "mask");
maskCanvas.style.position = "relative";
maskCanvas.width = patchWidth * scale;
maskCanvas.height = patchHeight * scale;
let maskCtx = maskCanvas.getContext("2d");
let maskImageData = maskCtx.createImageData(patchWidth, patchHeight);
row = [14, 19, 50, 71, 100, 240, 560, 640];    // Pixel locations where I want to set pixel color
row.forEach((pos, iter) => {
  maskImageData.data[pos * 4] = 0;
  maskImageData.data[pos * 4 + 1] = 0;
  maskImageData.data[pos * 4 + 2] = 0;
  maskImageData.data[pos * 4 + 3] = 255;
});
maskCtx.putImageData(maskImageData, 0, 0);
maskCtx.imageSmoothingEnabled = false;

//resize the canvas according to scale
maskCtx.drawImage(maskCanvas, 0, 0, patchWidth, patchHeight, 0, 0, patchWidth * scale, patchHeight * scale);

document.querySelector(".myDiv").appendChild(maskCanvas);

<div class="myDiv">

</div>

Это вывод фрагмента кода. Можно видеть, что исходные данные пикселей перед изменением размера все еще там вместе с измененным размером холста. Как я могу предотвратить это?

Answer 1

Используйте режим компоновки globalCompositeOperation= "copy". Каждый новый рисунок полностью заменяет пункт назначения (пиксели холста).

let maskCanvas = document.createElement("canvas");
let patchWidth = 30;
let patchHeight = 30;
let scale = 3;  //scale up the canvas by 3 times
maskCanvas.setAttribute("class", "mask");
maskCanvas.style.position = "relative";
maskCanvas.width = patchWidth * scale;
maskCanvas.height = patchHeight * scale;
let maskCtx = maskCanvas.getContext("2d");
let maskImageData = maskCtx.createImageData(patchWidth, patchHeight);
row = [14, 19, 50, 71, 100, 240, 560, 640];    // Pixel locations where I want to set pixel color
row.forEach((pos, iter) => {
  maskImageData.data[pos * 4] = 0;
  maskImageData.data[pos * 4 + 1] = 0;
  maskImageData.data[pos * 4 + 2] = 0;
  maskImageData.data[pos * 4 + 3] = 255;
});
maskCtx.putImageData(maskImageData, 0, 0);
maskCtx.imageSmoothingEnabled = false;

// every new drawing will replace completely current state
maskCtx.globalCompositeOperation = 'copy';

//resize the canvas according to scale
maskCtx.drawImage(maskCanvas, 0, 0, patchWidth, patchHeight, 0, 0, patchWidth * scale, patchHeight * scale);

// reset back to normal
maskCtx.globalCompositeOperation = 'source-over';

document.querySelector(".myDiv").appendChild(maskCanvas);

<div class="myDiv">

</div>

Answer 2

Вы дважды рисуете на холсте, что вам нужно сделать, это drawImage на новый холст.
см. Ниже Я показываю оба полотна

let maskCanvas = document.createElement("canvas");
let patchWidth = 30;
let patchHeight = 30;
let scale = 6;  //scale up the canvas 

maskCanvas.width = patchWidth * scale;
maskCanvas.height = patchHeight * scale;
let ctx = maskCanvas.getContext("2d");
let imageData = ctx.createImageData(patchWidth, patchHeight);
row = [14, 19, 50, 71, 100, 240, 560, 640];   
row.forEach((pos, iter) => {
  imageData.data[pos * 4] = 0;
  imageData.data[pos * 4 + 1] = Math.floor(Math.random() * Math.floor(255));
  imageData.data[pos * 4 + 2] = Math.floor(Math.random() * Math.floor(255));
  imageData.data[pos * 4 + 3] = 255;
});
ctx.putImageData(imageData, 0, 0);
ctx.imageSmoothingEnabled = false;

//resize the canvas according to scale
let canvas = document.createElement("canvas");
canvas.width = patchWidth * scale;
canvas.height = patchHeight * scale;

ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.drawImage(maskCanvas, 0, 0, patchWidth, patchHeight, 0, 0, patchWidth * scale, patchHeight * scale);

document.querySelector(".myDiv").appendChild(maskCanvas);
document.querySelector(".myDiv").appendChild(canvas);

canvas{border: 1px solid #c3c3c3;}

<div class="myDiv"></div>