Skip to content

Commit 9343629

Browse files
Optimize dot rendering rotation performance
Replaced expensive canvas state modifications (save, translate, rotate, restore) with native ellipse rotation parameter. This change significantly reduces the number of canvas API calls per drawn dot in dot stretching mode. Co-authored-by: jsem-nerad <88319121+jsem-nerad@users.noreply.github.com>
1 parent 2a7c2e2 commit 9343629

2 files changed

Lines changed: 3 additions & 12 deletions

File tree

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

src/dotwave.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -394,21 +394,11 @@
394394
const radiusX = dot.radius + stretchAmount;
395395
const radiusY = dot.radius;
396396

397-
// Save context state
398-
this.ctx.save();
399-
400-
// Translate to dot position and rotate
401-
this.ctx.translate(dot.x, dot.y);
402-
this.ctx.rotate(dot.currentAngle);
403-
404-
// Draw stretched ellipse
397+
// Draw stretched ellipse with built-in rotation
405398
this.ctx.beginPath();
406-
this.ctx.ellipse(0, 0, radiusX, radiusY, 0, 0, Math.PI * 2);
399+
this.ctx.ellipse(dot.x, dot.y, radiusX, radiusY, dot.currentAngle, 0, Math.PI * 2);
407400
this.ctx.fillStyle = fillStyle;
408401
this.ctx.fill();
409-
410-
// Restore context state
411-
this.ctx.restore();
412402
};
413403

414404
/**

0 commit comments

Comments
 (0)