Member Avatar for arunthewolf

Kindly note the error which i made in my code :

<html>
<head>
<script type="text/javascript">
function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
// Top of the tree
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// Close the path back to its start point
context.closePath();
}
function drawTrails() {
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.translate(130, 250);
// Create the shape for our canopy path
createCanopyPath(context);
// Stroke the current path
context.stroke();
context.restore();
}
</script>
</head>
<body onload="drawTrails()">
   <canvas id="trials" style="border: 1px solid;" width="600" height="600"></canvas>
</body>
</html>
  • 3 Contributors
  • 3 Replies
  • 254 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by lambing

Dani AI

Generated

The error means the call to getContext was made on null because the script couldn’t find the canvas element. As pointed out, the element id in the page didn’t match the id used by the script, and as noted, a proper HTML5 doctype (standards mode) is recommended. Both observations are relevant: fix the element-id mismatch and run the drawing code only after the DOM is available.

A safe pattern that avoids throwing the TypeError is to check for the element and for getContext before calling it:

document.addEventListener('DOMContentLoaded', function () {
  var canvas = document.getElementById('trails'); // the id referenced by the script
  if (!canvas) {
    console.error('Canvas element "trails" not found.');
    return;
  }
  if (typeof canvas.getContext !== 'function') {
    console.error('2D context not available; <canvas> may not be supported.');
    return;
  }
  var ctx = canvas.getContext('2d');
  // safe to call drawing helpers now (for example: createCanopyPath(ctx); ctx.stroke();)
});

Quick troubleshooting checklist:

  • Verify the canvas element id matches the id used in JavaScript (the most common cause).
  • Ensure the script runs after the DOM (use DOMContentLoaded or place scripts after the canvas).
  • Inspect the element in DevTools and console.log the element to confirm it is a real <canvas>.
  • Add <!DOCTYPE html> to force standards mode so modern HTML5 features behave predictably.
  • For very old IE (6/7/8), consider a polyfill (excanvas) or a graceful fallback; modern browsers do not need this.

Applying these checks will prevent the TypeError and make the drawing code fail-safe rather than throwing when the element is missing or the browser lacks canvas support.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

id="trials"

Should be id="trails"

Member Avatar for lambing

getContext is available for html5 only. You should declare the doctype on top of your file.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

hope that works

Member Avatar for lambing

pritaeas is right, "trails" (keen eyes you have)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.