Canvas Drag Rotation And Animation Optimization

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/canvas-drag-rotation-and-animation-optimizationThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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.

---
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

Excerpt, first 2,270 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about Canvas Drag Rotation And Animation Optimization

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology