Improving Canvas draw call Performance

Question

I want to draw quite a few dots. That's what I do:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

function render () {
    window.requestAnimationFrame(render);
    // clear screen
    ctx.clearRect(0, 0, cwidth, cheight);
    for (let p of particles) {
        p.rmove();
        p.render(ctx);
    }
}

render();

The drawing function for my point looks like this:

class Point {

    x: number;
    y: number;

    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    rmove() {
        this.x += Math.round(Math.random() < 0.5 ? -1 : 1);
        this.y += Math.round(Math.random() < 0.5 ? -1 : 1);
    }

    render (ctx) {
        ctx.fillStyle = "gray";
        ctx.beginPath();
        ctx.rect(this.x, this.y, 1.5,1.5);
        ctx.fill();
        ctx.stroke();
    }
}

Note that I round the values in the rmove() function, as canvas draws points with integer coordinates more quickly.

I'd like to somehow put all these drawing calls together.

Answer 1

Make your points trace on the given context (could even be a Path2D), and keep the actual drawing for the renderer.

All your points have to do is to make the context moveTo their own coords before tracing the rect .

 class Point { constructor(x, y) { this.x = x; this.y = y; } rmove() { this.x += Math.round(Math.random() < 0.5 ? -1 : 1); this.y += Math.round(Math.random() < 0.5 ? -1 : 1); } trace (ctx) { ctx.moveTo( this.x, this.y ); ctx.rect(this.x, this.y, 1.5, 1.5); } } const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const cwidth = canvas.width = 300; const cheight = canvas.height = 300; const particles = Array.from( { length: 5000 }, ()=> new Point( cwidth/2, cheight/2 ) ); function animate () { update(); draw(); window.requestAnimationFrame(animate); } function update() { for (let p of particles) { p.rmove(); } } function draw() { // clear screen ctx.clearRect(0, 0, cwidth, cheight); // define our single path ctx.beginPath(); for (let p of particles) { p.trace(ctx); } ctx.fillStyle = "gray"; ctx.stroke(); // OP has it reversed, but then the fill-color is almost not visible // (1.5 width - 2*0.5 stroke leaves only 0.5 for the fill => antialiased... ctx.fill(); } window.requestAnimationFrame( animate );

 <canvas id="canvas"></canvas>

But this works only because all your particles share the same color. If they didn't, then you'd need a bit more logic:

 const colors = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow']; class Point { constructor(x, y, color=0) { this.x = x; this.y = y; this.color = color; } rmove() { this.x += Math.round(Math.random() < 0.5 ? -1 : 1); this.y += Math.round(Math.random() < 0.5 ? -1 : 1); } trace (ctx) { ctx.moveTo( this.x, this.y ); ctx.rect(this.x, this.y, 1.5, 1.5); } } const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const cwidth = canvas.width = 300; const cheight = canvas.height = 300; const particles = Array.from( { length: 5000 }, ()=> new Point( cwidth/2, cheight/2, (Math.random()*colors.length-1)|0 ) ); function animate () { update(); draw(); window.requestAnimationFrame(animate); } function update() { for (let p of particles) { p.rmove(); } } function draw() { // clear screen ctx.clearRect(0, 0, cwidth, cheight); // define our single path let last_color = -1; for (let p of particles) { let p_color = p.color; if( p_color !== last_color ) { paint(); last_color = p_color; } p.trace(ctx); } paint(); // the last function paint() { ctx.fillStyle = colors[ last_color ]; ctx.strokeStyle = colors[ (last_color + 1) % colors .length ]; ctx.stroke(); ctx.fill(); ctx.beginPath(); } } window.requestAnimationFrame( animate );

 <canvas id="canvas"></canvas>

Though doing this, you may very well end up with a lot of drawings, so a final trick which might not work everywhere is to sort your particles by their color. This results in a different graphic since this one color will always be at the top, but it might work in some cases and the performance gain can outfit the downside.

 const colors = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow']; class Point { constructor(x, y, color=0) { this.x = x; this.y = y; this.color = color; } rmove() { this.x += Math.round(Math.random() < 0.5 ? -1 : 1); this.y += Math.round(Math.random() < 0.5 ? -1 : 1); } trace (ctx) { ctx.moveTo( this.x, this.y ); ctx.rect(this.x, this.y, 1.5, 1.5); } } const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const cwidth = canvas.width = 300; const cheight = canvas.height = 300; const particles = Array.from( { length: 5000 }, ()=> new Point( cwidth/2, cheight/2, (Math.random()*colors.length-1)|0 ) ); particles.sort( (a, b) => a.color - b.color ); function animate () { update(); draw(); window.requestAnimationFrame(animate); } function update() { for (let p of particles) { p.rmove(); } } function draw() { // clear screen ctx.clearRect(0, 0, cwidth, cheight); // define our single path let last_color = -1; for (let p of particles) { let p_color = p.color; if( p_color !== last_color ) { paint(); last_color = p_color; } p.trace(ctx); } paint(); // the last function paint() { ctx.fillStyle = colors[ last_color ]; ctx.strokeStyle = colors[ (last_color + 1) % colors .length ]; ctx.stroke(); ctx.fill(); ctx.beginPath(); } } window.requestAnimationFrame( animate );

 <canvas id="canvas"></canvas>

And nothing prevents you to generate chunks from these sorted particles so it looks more random.