Before Path2D was added, when doing animation with lots of CanvasRenderingContext2D draw methods, we have to put in a function and call it again and again. But Path2D can be reused, it should be recommanded.
Fail
function draw() {
context.moveTo(220, 60);
context.arc(170, 60, 50, 0, 2 * Math.PI);
// ...
context.stroke();
}
function step() {
draw();
if (foo) {
requestAnimationFrame(step);
}
}
requestionAnimationFrame(step)Pass
const path = new Path2D();
path.moveTo(220, 60);
path.arc(170, 60, 50, 0, 2 * Math.PI);
function step() {
context.stroke(path);
if (foo) {
requestAnimationFrame(step);
}
}
requestionAnimationFrame(step)Not sure if it's doable in ESLint, maybe we can check a function called many CanvasRenderingContext2D draw method without variables, and suggest Path2D.
sindresorhus / eslint-plugin-unicorn
More than 100 powerful ESLint rules
4.2k
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too