引入CodePen代码后遇Uncaught TypeError: c.getContext is not a function错误求助

The error you’re encountering means the variable c you’re trying to call getContext('2d') on isn’t a valid HTML <canvas> element. Let’s break down the most common fixes for this issue:

1. Ensure c points to a real <canvas> element #

Double-check how you’re selecting the element assigned to c. If you’re using getElementById or another selector, make sure the target element is actually a <canvas> tag—not a <div>, <img>, or any other type of element (only canvas elements have the getContext method).

Example of what to avoid:

<div id="glitch-element"></div>
<script>
var c = document.getElementById('glitch-element');
var $ = c.getContext('2d'); // Error: c is a div, not canvas
</script>

Correct approach:

<canvas id="glitch-canvas"></canvas>
<script>
var c = document.getElementById('glitch-canvas');
var $ = c.getContext('2d'); // Works as expected
</script>

2. Run your script after the DOM is fully loaded #

If your JavaScript runs before the browser finishes parsing the canvas element, c will be null, and calling getContext on null throws this error. Fix this in one of two ways:

Option A: Move your script to the end of the <body> #

Place your glitch.js script tag right before the closing </body> tag so the canvas exists when the code executes:

<body>
  <!-- Your other HTML content -->
  <canvas id="glitch-canvas"></canvas>
  
  <script src="glitch.js"></script>
</body>

Option B: Wrap your code in a DOM-ready listener #

If you need to keep the script in the <head> or another location, wrap your entire glitch.js code inside this event listener:

document.addEventListener('DOMContentLoaded', function() {
  // Your existing glitch.js code (including the IIFE) goes here
  (function() {
    var c = document.getElementById('glitch-canvas');
    var $ = c.getContext('2d');
    // ... rest of your code
  }());
});

3. Avoid variable name collisions #

If another part of your code reuses the variable name c (like a counter or another element reference), it might overwrite your canvas pointer. Rename c to something more unique (like glitchCanvas) to prevent conflicts:

var glitchCanvas = document.getElementById('glitch-canvas');
var ctx = glitchCanvas.getContext('2d'); // Using `ctx` instead of `$` is also more readable!

Quick Debugging Trick #

Add a console log right before line 3 to verify what c is:

console.log('Value of c:', c);
var $ = c.getContext('2d');

If the log shows null or an element that’s not a canvas, you’ll know exactly which issue to prioritize fixing.

内容的提问来源于stack exchange，提问作者Pacislavek