problem With appendChild the canvas doesn't included TypeError JS Console

-1

i had an error message from the console

this is the js code

console message : Uncaught TypeError: Cannot read property 'appendChild' of null
at file1.js:15

// Create the Canvas On Page



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

asked Nov 22 '18 at 20:57

D.Anis

614

add a comment |

-1

i had an error message from the console

this is the js code

console message : Uncaught TypeError: Cannot read property 'appendChild' of null
at file1.js:15

// Create the Canvas On Page



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

asked Nov 22 '18 at 20:57

D.Anis

614

add a comment |

-1

i had an error message from the console

this is the js code

console message : Uncaught TypeError: Cannot read property 'appendChild' of null
at file1.js:15

// Create the Canvas On Page



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

asked Nov 22 '18 at 20:57

D.Anis

614

i had an error message from the console

this is the js code

console message : Uncaught TypeError: Cannot read property 'appendChild' of null
at file1.js:15

// Create the Canvas On Page



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

// Create the Canvas On Page



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

// Create the Canvas On Page



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

javascript html css canvas html5-canvas

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

asked Nov 22 '18 at 20:57

D.Anis

614

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

asked Nov 22 '18 at 20:57

D.Anis

614

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

edited Nov 22 '18 at 21:11

Randy Casburn

5,5421319

asked Nov 22 '18 at 20:57

D.Anis

614

asked Nov 22 '18 at 20:57

D.Anis

614

asked Nov 22 '18 at 20:57

D.Anis

614

add a comment |

3 Answers
3

active

oldest

votes

That isn't your problem. Your context is not being recorded into the myContext var. To prove this you can console.log(mycanvas) ≈ and you will see it is actually there.

Change:

myContext = mycanvas.getContext('2');

To:

myContext = mycanvas.getContext('2d');

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

yes you're right i forgot it thanks a lot for your help

– D.Anis
Nov 22 '18 at 22:05

You are very welcome. Please consider this: What should I do when someone answers my question?

– Randy Casburn
Nov 22 '18 at 22:13

add a comment |

test your code and the only error that I got was

Uncaught TypeError: Cannot set property 'fillStyle' of null

This is because in the context you should use 2d instead of 2
after that everything works well.

The only way to reproduce your error is having an HTML file that doesn't contain a body tag or maybe you are calling the script before the body tag in the HTML structure.

This is the example working.
https://jsfiddle.net/v4e0twd5/

answered Nov 22 '18 at 21:16

user2668676

yes you're right i used to called JS file after the body the content show up but still got an error

– D.Anis
Nov 22 '18 at 22:00

add a comment |

The problem could be that you load the script before the body.You should load the script after body tag. For example:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>

     <body>

      <h1>Body content</h1>

     </body>

 <script>



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2d');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

</script>

</html>

Or include the js file after body load:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>



     <body>

      <h1>Body content</h1>

     </body>



     <script src="path/to/file.js"></script>



</html>

edited Nov 22 '18 at 21:17

answered Nov 22 '18 at 21:12

Kurohige

6001621

i've been used the first one it works with no console message and used the second one the content show up in the browser but i still got the console message so the problem just in ordering ? thanks a lot for your help

– D.Anis
Nov 22 '18 at 21:54

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437898%2fproblem-with-appendchild-the-canvas-doesnt-included-typeerror-js-console%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

That isn't your problem. Your context is not being recorded into the myContext var. To prove this you can console.log(mycanvas) ≈ and you will see it is actually there.

Change:

myContext = mycanvas.getContext('2');

To:

myContext = mycanvas.getContext('2d');

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

yes you're right i forgot it thanks a lot for your help

– D.Anis
Nov 22 '18 at 22:05

You are very welcome. Please consider this: What should I do when someone answers my question?

– Randy Casburn
Nov 22 '18 at 22:13

add a comment |

That isn't your problem. Your context is not being recorded into the myContext var. To prove this you can console.log(mycanvas) ≈ and you will see it is actually there.

Change:

myContext = mycanvas.getContext('2');

To:

myContext = mycanvas.getContext('2d');

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

yes you're right i forgot it thanks a lot for your help

– D.Anis
Nov 22 '18 at 22:05

You are very welcome. Please consider this: What should I do when someone answers my question?

– Randy Casburn
Nov 22 '18 at 22:13

add a comment |

That isn't your problem. Your context is not being recorded into the myContext var. To prove this you can console.log(mycanvas) ≈ and you will see it is actually there.

Change:

myContext = mycanvas.getContext('2');

To:

myContext = mycanvas.getContext('2d');

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

That isn't your problem. Your context is not being recorded into the myContext var. To prove this you can console.log(mycanvas) ≈ and you will see it is actually there.

Change:

myContext = mycanvas.getContext('2');

To:

myContext = mycanvas.getContext('2d');

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

answered Nov 22 '18 at 21:12

Randy Casburn

5,5421319

yes you're right i forgot it thanks a lot for your help

– D.Anis
Nov 22 '18 at 22:05

You are very welcome. Please consider this: What should I do when someone answers my question?

– Randy Casburn
Nov 22 '18 at 22:13

add a comment |

yes you're right i forgot it thanks a lot for your help

– D.Anis
Nov 22 '18 at 22:05

You are very welcome. Please consider this: What should I do when someone answers my question?

– Randy Casburn
Nov 22 '18 at 22:13

yes you're right i forgot it thanks a lot for your help

– D.Anis
Nov 22 '18 at 22:05

You are very welcome. Please consider this: What should I do when someone answers my question?

– Randy Casburn
Nov 22 '18 at 22:13

add a comment |

test your code and the only error that I got was

Uncaught TypeError: Cannot set property 'fillStyle' of null

This is because in the context you should use 2d instead of 2
after that everything works well.

The only way to reproduce your error is having an HTML file that doesn't contain a body tag or maybe you are calling the script before the body tag in the HTML structure.

This is the example working.
https://jsfiddle.net/v4e0twd5/

answered Nov 22 '18 at 21:16

user2668676

yes you're right i used to called JS file after the body the content show up but still got an error

– D.Anis
Nov 22 '18 at 22:00

add a comment |

test your code and the only error that I got was

Uncaught TypeError: Cannot set property 'fillStyle' of null

This is because in the context you should use 2d instead of 2
after that everything works well.

The only way to reproduce your error is having an HTML file that doesn't contain a body tag or maybe you are calling the script before the body tag in the HTML structure.

This is the example working.
https://jsfiddle.net/v4e0twd5/

answered Nov 22 '18 at 21:16

user2668676

yes you're right i used to called JS file after the body the content show up but still got an error

– D.Anis
Nov 22 '18 at 22:00

add a comment |

test your code and the only error that I got was

Uncaught TypeError: Cannot set property 'fillStyle' of null

This is because in the context you should use 2d instead of 2
after that everything works well.

The only way to reproduce your error is having an HTML file that doesn't contain a body tag or maybe you are calling the script before the body tag in the HTML structure.

This is the example working.
https://jsfiddle.net/v4e0twd5/

answered Nov 22 '18 at 21:16

user2668676

test your code and the only error that I got was

Uncaught TypeError: Cannot set property 'fillStyle' of null

This is because in the context you should use 2d instead of 2
after that everything works well.

The only way to reproduce your error is having an HTML file that doesn't contain a body tag or maybe you are calling the script before the body tag in the HTML structure.

This is the example working.
https://jsfiddle.net/v4e0twd5/

answered Nov 22 '18 at 21:16

user2668676

answered Nov 22 '18 at 21:16

user2668676

answered Nov 22 '18 at 21:16

user2668676

answered Nov 22 '18 at 21:16

user2668676

yes you're right i used to called JS file after the body the content show up but still got an error

– D.Anis
Nov 22 '18 at 22:00

add a comment |

yes you're right i used to called JS file after the body the content show up but still got an error

– D.Anis
Nov 22 '18 at 22:00

yes you're right i used to called JS file after the body the content show up but still got an error

– D.Anis
Nov 22 '18 at 22:00

add a comment |

The problem could be that you load the script before the body.You should load the script after body tag. For example:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>

     <body>

      <h1>Body content</h1>

     </body>

 <script>



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2d');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

</script>

</html>

Or include the js file after body load:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>



     <body>

      <h1>Body content</h1>

     </body>



     <script src="path/to/file.js"></script>



</html>

edited Nov 22 '18 at 21:17

answered Nov 22 '18 at 21:12

Kurohige

6001621

i've been used the first one it works with no console message and used the second one the content show up in the browser but i still got the console message so the problem just in ordering ? thanks a lot for your help

– D.Anis
Nov 22 '18 at 21:54

add a comment |

The problem could be that you load the script before the body.You should load the script after body tag. For example:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>

     <body>

      <h1>Body content</h1>

     </body>

 <script>



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2d');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

</script>

</html>

Or include the js file after body load:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>



     <body>

      <h1>Body content</h1>

     </body>



     <script src="path/to/file.js"></script>



</html>

edited Nov 22 '18 at 21:17

answered Nov 22 '18 at 21:12

Kurohige

6001621

i've been used the first one it works with no console message and used the second one the content show up in the browser but i still got the console message so the problem just in ordering ? thanks a lot for your help

– D.Anis
Nov 22 '18 at 21:54

add a comment |

The problem could be that you load the script before the body.You should load the script after body tag. For example:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>

     <body>

      <h1>Body content</h1>

     </body>

 <script>



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2d');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

</script>

</html>

Or include the js file after body load:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>



     <body>

      <h1>Body content</h1>

     </body>



     <script src="path/to/file.js"></script>



</html>

edited Nov 22 '18 at 21:17

answered Nov 22 '18 at 21:12

Kurohige

6001621

The problem could be that you load the script before the body.You should load the script after body tag. For example:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>

     <body>

      <h1>Body content</h1>

     </body>

 <script>



var myPageCanvas = document.createElement('canvas');



// Assign ID to this canvas



myPageCanvas.id = 'c';

myPageCanvas.width = 600;

myPageCanvas.height = 100;

myPageCanvas.style.display = 'block';

myPageCanvas.style.margin = '50px auto';



// Add the canvas to the Page



document.body.appendChild(myPageCanvas);



// Get Canvas information



var mycanvas = document.getElementById('c');



myContext = mycanvas.getContext('2d');



// fill and style option



myContext.fillStyle = '#f00';

myContext.strokeStyle = '#00f';

myContext.lineWidth = 4;

myContext.font = '100px Arial';



// add the text



myContext.fillText('Elzero Web School', 50, 80);

</script>

</html>

Or include the js file after body load:

<!DOCTYPE html>

<html>

  <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  </head>



     <body>

      <h1>Body content</h1>

     </body>



     <script src="path/to/file.js"></script>



</html>

edited Nov 22 '18 at 21:17

answered Nov 22 '18 at 21:12

Kurohige

6001621

edited Nov 22 '18 at 21:17

answered Nov 22 '18 at 21:12

Kurohige

6001621

answered Nov 22 '18 at 21:12

Kurohige

6001621

answered Nov 22 '18 at 21:12

Kurohige

6001621

i've been used the first one it works with no console message and used the second one the content show up in the browser but i still got the console message so the problem just in ordering ? thanks a lot for your help

– D.Anis
Nov 22 '18 at 21:54

add a comment |

i've been used the first one it works with no console message and used the second one the content show up in the browser but i still got the console message so the problem just in ordering ? thanks a lot for your help

– D.Anis
Nov 22 '18 at 21:54

i've been used the first one it works with no console message and used the second one the content show up in the browser but i still got the console message so the problem just in ordering ? thanks a lot for your help

– D.Anis
Nov 22 '18 at 21:54

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk