Вы перерисовываете путь каждый раз, когда добавляете к нему линию. Это квадратично и не обязательно. (Квадратичная проблема, если у вас более 20 000 строк.)
Нарисуйте один раз:
let x = 0;
for (let y = 0; y < world.height; y++) {
context.lineTo(x, y);
for (x = 0; x < 10; x++) {
context.lineTo(x, y);
}
}
context.stroke();
А если вы хотите рисовать несколькими цветами, начинайте каждый путь с каждой строки:
let x = 0;
for (let y = 0; y < world.height; y++) {
//TODO: ADD RANDOM RGB COLOR TO STROKE
context.lineTo(x, y);
context.stroke();
context.beginPath();
context.moveTo(x, y);
for (x = 0; x < 10; x++) {
//TODO: ADD RANDOM RGB COLOR TO STROKE
context.lineTo(x, y);
context.stroke();
context.beginPath();
context.moveTo(x, y);
}
}
fillRect
кажется лучшим выбором для метода canvas для рисования пикселя, однако:
const getRandomColor = () =>
'#' + (Math.random() * 0x1000000 >>> 0).toString(16);
const world = document.getElementById('canvas');
const context = world.getContext('2d');
const start = performance.now();
for (let y = 0; y < world.height; y++) {
for (let x = 0; x < world.width; x++) {
context.fillStyle = getRandomColor();
context.fillRect(x, y, 1, 1);
}
}
console.log(performance.now() - start);
<canvas id="canvas"></canvas>
И, наконец, размещение данных изображения, вероятно, дает наилучшую производительность.
const world = document.getElementById('canvas');
const context = world.getContext('2d');
const start = performance.now();
const {width, height} = world;
const random32 = new Uint32Array(width * height);
for (let i = 0; i < random32.length; i++) {
random32[i] = Math.random() * 0x100000000 >>> 0;
}
const randomRGBA = new Uint8ClampedArray(random32.buffer);
for (let i = 3; i < randomRGBA.length; i += 4) {
randomRGBA[i] = 255;
}
const imageData = new ImageData(randomRGBA, width, height);
context.putImageData(imageData, 0, 0);
console.log(performance.now() - start);
<canvas id="canvas"></canvas>
(Забавный факт: crypto.getRandomValues
быстрее, чем это на практике, но не лучший выбор.)