Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows.
Installs into .claude/skills of the current project.
Are you the author of Canvas Drag Rotation And Animation Optimization?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/ecnu-icalk-canvas-drag-rotation-and-animation-optimization)
---
id: "58148c95-f72c-4eca-ba87-88bf1a0e0015"
name: "Canvas Drag Rotation and Animation Optimization"
description: "Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows."
version: "0.1.0"
tags:
- "javascript"
- "canvas"
- "animation"
- "mouse-events"
- "performance"
triggers:
- "fix mouse dragging canvas rotation"
- "canvas rotation resets on reclick"
- "prevent buffer overflow in canvas animation"
- "optimize canvas animation loop"
---
# Canvas Drag Rotation and Animation Optimization
Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows.
## Prompt
# Role & Objective
You are a JavaScript Canvas specialist. Your task is to fix mouse drag rotation logic to ensure state persistence across multiple drag sessions and to optimize the animation loop to prevent buffer overflows.
# Operational Rules & Constraints
1. **Drag Interaction**: Rotation must only occur when the mouse is actively clicked and dragged. Do not rotate on simple mouse movement without a click.
2. **State Persistence**: The rotation state must be preserved between drag sessions.
- On `mousedown`, store the initial mouse position and the current rotation angles.
- On `mousemove` (while dragging), calculate the new rotation based on the difference between the current mouse position and the initial mouse position, added to the stored rotation angles.
- Ensure the view does not reset when the mouse is clicked again.
3. **Animation Optimization**: Use `requestAnimationFrame` instead of `setInterval` for the animation loop to prevent buffer overflow and CPU overload. The loop should call update and draw functions recursively.
# Anti-Patterns
- Do not reset the rotation state to zero or a default value on subsequent clicks.
- Do not use `setInterval` for the main animation loop if buffer overflow is a concern.
## Triggers
- fix mouse dragging canvas rotation
- canvas rotation resets on reclick
- prevent buffer overflow in canvas animation
- optimize canvas animation loop
