All geek questions in one place

TypeError: unable to call getContext null method (anonymous function)

I am new to this and have not actually done any JavaScript before, so I hope you can help me. I made a canvas that allows the user to select a shape and color using the switches that are then drawn on the canvas. I also added a flag with the ability to add a gradient to the selected color. Here's the program: http://people.dsv.su.se/~caak1743/Canvas/canvas.html

Now I will not make it so that the figures can be dragged and dropped around the canvas. And I found code that I think can be modified to work on my program, but I keep getting: TypeError: It is not possible to call the getContext null method on this (anonymous function) for the string:

var ctx = canvas.getContext("2d");

and I don’t know what is wrong, or how I can solve it. I tried looking for similar programs with similar problems, but did not find anything that I can apply here. Here is the code I'm trying to include with mine:

  function init() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rectangle(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rectangle(); } function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e){ if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp;
+6
source share
4 answers

Just fix it like this:

 <script type="text/javascript"> window.onLoad=function(){ init();}; function init() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rectangle(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rectangle(); } function myMove(e) { if (dragok) { x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e) { if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop) { x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp() { dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; </script>

That should work. The problem is that the canvas element must be ready to run the script. Since <script> in <head> is executed before the start of loading <canvas> <head> , it gives an error.

+17
source

I found two solutions. The first one is to add jquery to your page, and then there is no need to use in-html js, wrapping all the js code in

$(document).ready(function() { Your code here });

which makes the code run after html is ready or just replace the head and body, where there is no need to use in-html js (it runs html before js). They should work.
+3
source

You just need to do this to get rid of the error. Just add the canvas to the script and always put your script at the end.

 <body> <canvas id="ca"></canvas> <script type="text/javascript"> var ca = document.getElementById("ca"); var co = ca.getContext("2d"); // whatever your code </script> </body>
+1
source

Make sure your script AFTER your canvas element.

0
source

Source: https://habr.com/ru/post/916131/

More articles:


All Articles