HTML5 Canvas Данные изображения наклонены ⇐ Javascript

[Anonymous]

Я пытаюсь создать множество точек из метода Canvas Imagedata. Все точки собираются нормально, но когда я перерисовываю точки, используя собранные значения x y, изображение наклонится. Как я могу получить правильные значения пикселей? «Снари-кодек-д-д-л Ланг-JS PrettyPrint-Override»>const canvas = document.getElementById('skills');
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 300;
const linesNumber = 2;
const text = ['FRANK', 'ASTIN'];

ctx.font = '150px lorimer';
ctx.fillStyle = 'red';

ctx.fillText(text[0], 0, 110);
ctx.fillText(text[1], 0, 260);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const particles = [];
const pixels = imageData.data;

let x = 0;
let y = 0;

for (let p = 0; p < pixels.length; p += 4) {

if (pixels[p + 3] > 0) {

particles.push({
x: x,
y: y
});

}

x += 1;

if (x > canvas.width) {
x = 0;
y++;
}
}

ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach((particle) => {

ctx.fillRect(particle.x, particle.y, 3, 3)

})< /code>
< /code>
< /div>
< /div>
< /p>
Я написал код на основе другого проекта, который я видел в Интернете, но получил наклонный Изображение


Подробнее здесь: https://stackoverflow.com/questions/794 ... is-slanted