# Validate HTML
npx html-validate index.html

# Or use W3C validator
curl -H "Content-Type: text/html; charset=utf-8" \
  --data-binary @index.html \
  https://validator.w3.org/nu/?out=json

// ✅ Check Canvas support
const canvas = document.getElementById('main');
if (!canvas || !canvas.getContext) {
  // Fallback or error message
  alert('Canvas not supported! Use modern browser.');
}

const context = canvas.getContext('2d');
if (!context) {
  alert('Canvas 2D context not available!');
}

// ✅ Check getImageData support
try {
  const testData = context.getImageData(0, 0, 1, 1);
} catch(e) {
  console.error('getImageData not supported or blocked by CORS');
}

// Check requestAnimationFrame
if (!window.requestAnimationFrame) {
  // Polyfill or fallback
  window.requestAnimationFrame = function(callback) {
    return setTimeout(callback, 16);
  };
}

// Check Performance API
if (!window.performance || !window.performance.now) {
  // Fallback to Date.now()
  window.performance = {
    now: function() {
      return Date.now();
    }
  };
}

<!-- ✅ Canvas with fallback content -->
<canvas id="main">
  Your browser does not support HTML5 Canvas.
  Please use a modern browser such as Chrome, Firefox or Safari.
</canvas>

<!-- ✅ Images with alt text -->
<img src="img/achtung-small.png" alt="Zatacka Game Logo">

### HTML5 Validation Report - [Date/Time]

#### 📊 Summary

- **HTML5 Markup:** [✅ VALID / ❌ ERRORS]
- **Canvas API:** [✅ OK / ⚠️ ISSUES]
- **Browser Compatibility:** [✅ COMPATIBLE / ⚠️ LIMITATIONS]
- **Accessibility:** [✅ OK / ⚠️ IMPROVEMENTS NEEDED]
- **Overall Status:** [✅ APPROVED / ⚠️ ATTENTION / ❌ REJECTED]

---

#### 📄 HTML5 Markup Validation

**W3C Validation:**
- Errors: [N]
- Warnings: [N]

**Issues Found:**
1. [Error/Warning 1]
2. [Error/Warning 2]

**Recommendations:**
- [Fix 1]
- [Fix 2]

---

#### 🎨 Canvas API Validation

**Canvas Support:**
- Canvas element: [✅/❌]
- 2D Context: [✅/❌]
- getImageData: [✅/❌]
- toDataURL: [✅/❌]

**Usage Issues:**
- [Issue 1 if any]
- [Issue 2 if any]

**Best Practices:**
- [X] Error handling present
- [X] Fallback content defined
- [X] Context state management correct
- [ ] [Issue if any]

---

#### 🌐 Browser Compatibility

##### Chrome (latest)
- Canvas: ✅
- requestAnimationFrame: ✅
- getImageData: ✅
- Events: ✅
- Performance: ✅
- **Status:** ✅ FULLY COMPATIBLE

##### Firefox (latest)
- Canvas: ✅
- requestAnimationFrame: ✅
- getImageData: ✅
- Events: ✅
- Performance: ✅
- **Status:** ✅ FULLY COMPATIBLE

##### Safari (latest)
- Canvas: ✅
- requestAnimationFrame: ✅
- getImageData: ⚠️ [issue if any]
- Events: ✅
- Performance: ✅
- **Status:** [✅/⚠️]

##### Edge (latest)
- Canvas: ✅
- requestAnimationFrame: ✅
- getImageData: ✅
- Events: ✅
- Performance: ✅
- **Status:** ✅ FULLY COMPATIBLE

##### Mobile Browsers
- iOS Safari: [⚠️ CONTROLS NOT SUPPORTED]
- Chrome Mobile: [⚠️ CONTROLS NOT SUPPORTED]
- **Status:** ❌ NOT SUPPORTED (desktop-only game)

---

#### ♿ Accessibility Check

**WCAG Compliance:**
- Color Contrast: [✅/⚠️]
- Alt Text: [✅/⚠️]
- Keyboard Navigation: [N/A for game]
- ARIA Labels: [✅/⚠️]
- Focus Indicators: [✅/⚠️]

**Issues:**
- [Issue 1]
- [Issue 2]

**Recommendations:**
- [Recommendation 1]
- [Recommendation 2]

---

#### 🔧 API Usage Validation

##### Performance API
- performance.now(): [✅ USED CORRECTLY]
- Fallback present: [✅/❌]

##### Canvas API
- getContext(): [✅ WITH ERROR HANDLING]
- getImageData(): [✅ USED CORRECTLY]
- Context operations: [✅ CORRECT]

##### Event APIs
- KeyboardEvent: [✅ CORRECT]
- MouseEvent: [✅ CORRECT]
- Event listeners cleanup: [⚠️ SEE DETAILS]

##### requestAnimationFrame
- Usage: [✅ CORRECT]
- Fallback/Polyfill: [✅/❌]

---

#### 💡 Recommendations

##### 🔴 CRITICAL
1. [Critical recommendation]

##### 🟡 MODERATE
1. [Moderate recommendation]

##### 🟢 OPTIONAL
1. [Optional recommendation]

---

#### 🏁 Final Verdict

**Compatibility:** [X/10]
**Standards Compliance:** [X/10]
**Accessibility:** [X/10]

**Status:** [✅ APPROVED / ⚠️ APPROVED WITH RESERVATIONS / ❌ REQUIRES FIXES]

**Conclusion:**
[General summary and next steps]

- W3C HTML Validator: https://validator.w3.org/
- W3C CSS Validator: https://jigsaw.w3.org/css-validator/
- Can I Use: https://caniuse.com/
- MDN Browser Compatibility Data: https://github.com/mdn/browser-compat-data

# HTML validation
npm install -g html-validate
html-validate index.html

# Accessibility check
npm install -g pa11y
pa11y http://localhost:8000

# Lighthouse (overall)
npm install -g lighthouse
lighthouse http://localhost:8000 --view

- Chrome DevTools > Lighthouse
- Firefox DevTools > Accessibility Inspector
- Safari Web Inspector
- Edge DevTools

**Minimum Requirements:**
- Canvas 2D Context
- getImageData / putImageData
- Arc, fill, stroke, clearRect
- fillStyle, strokeStyle
- beginPath, closePath
- save / restore

**All modern browsers support:**
- Chrome 4+
- Firefox 3.6+
- Safari 4+
- Edge (all versions)
- IE 9+ (obsolete, not supported)

**Conclusion:** Zatacka is compatible with all modern browsers.

**CORS with getImageData:**
- If loading images from different domain
- Solution: use CORS headers or serve locally

**Hardware Acceleration:**
- Some browsers/OS may disable it
- Affects performance but not functionality
- User should enable if possible

**High DPI / Retina Displays:**
- Canvas may appear blurry
- Solution: detect devicePixelRatio and adjust
- Not critical for Zatacka

### HTML5 Validation Report - Zatacka

#### 📊 Summary

- **HTML5 Markup:** ✅ VALID
- **Canvas API:** ✅ OK
- **Browser Compatibility:** ✅ COMPATIBLE
- **Accessibility:** ⚠️ IMPROVEMENTS SUGGESTED
- **Overall Status:** ✅ APPROVED WITH RESERVATIONS

#### 📄 HTML5 Markup

✅ Correct DOCTYPE
✅ UTF-8 Charset
✅ Valid structure
✅ No deprecated tags

#### 🎨 Canvas API

✅ Canvas support with fallback
✅ getContext with error handling
✅ getImageData used correctly
✅ Context state management OK

#### 🌐 Browser Compatibility

✅ Chrome: Fully compatible
✅ Firefox: Fully compatible
✅ Safari: Fully compatible
✅ Edge: Fully compatible
❌ Mobile: Not supported (by design)

#### ♿ Accessibility

⚠️ Add meta description
⚠️ Improve contrast ratio in some texts
✅ Alt text present
✅ Canvas fallback present

#### 🏁 Verdict

✅ APPROVED WITH RESERVATIONS

The game is fully compatible with all modern desktop browsers.
Accessibility recommendations are optional but would improve experience.