HTML5 Dynamically create Canvas

Question

Hi there I have a question about dynamically creating a canvas using javascript   I create a canvas like this   var canvas   document createElement  canvas    canvas id        CursorLayer   canvas width    1224  canvas height   768  canvas style zIndex     8  canvas style position    absolute   canvas style border      1px solid     but when I try to locate it  I get a null value   cursorLayer   document getElementById  CursorLayer      Am I doing it wrong  Is there a better way to create a canvas using JavaScript

User · Accepted Answer

The problem is that you do not insert your canvas element in the document body.

Just do the following:

document.body.appendChild(canvas);

Example:

_x000D_

var canvas = document.createElement('canvas');_x000D_
_x000D_
canvas.id = "CursorLayer";_x000D_
canvas.width = 1224;_x000D_
canvas.height = 768;_x000D_
canvas.style.zIndex = 8;_x000D_
canvas.style.position = "absolute";_x000D_
canvas.style.border = "1px solid";_x000D_
_x000D_
_x000D_
var body = document.getElementsByTagName("body")[0];_x000D_
body.appendChild(canvas);_x000D_
_x000D_
cursorLayer = document.getElementById("CursorLayer");_x000D_
_x000D_
console.log(cursorLayer);_x000D_
_x000D_
// below is optional_x000D_
_x000D_
var ctx = canvas.getContext("2d");_x000D_
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";_x000D_
ctx.fillRect(100, 100, 200, 200);_x000D_
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";_x000D_
ctx.fillRect(150, 150, 200, 200);_x000D_
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";_x000D_
ctx.fillRect(200, 50, 200, 200);

_x000D_

User · Answer

lt html gt    lt head gt  lt  head gt    lt body gt    lt canvas id  canvas  width  300  height  300  gt  lt  canvas gt    lt script gt    var sun   new Image      var moon   new Image      var earth   new Image      function init       sun src    https   mdn mozillademos org files 1456 Canvas sun png     moon src    https   mdn mozillademos org files 1443 Canvas moon png     earth src    https   mdn mozillademos org files 1429 Canvas earth png     window requestAnimationFrame draw          function draw       var ctx   document getElementById  canvas   getContext  2d       ctx globalCompositeOperation    destination-over     ctx clearRect 0  0  300  300      ctx fillStyle    rgba 0  0  0  0 4      ctx strokeStyle    rgba 0  153  255  0 4      ctx save      ctx translate 150  150         Earth   var time   new Date      ctx rotate   2   Math PI    60    time getSeconds       2   Math PI    60000       time getMilliseconds       ctx translate 105  0     ctx fillRect 10  -19  55  31      ctx drawImage earth  -12  -12          Moon   ctx save      ctx rotate   2   Math PI    6    time getSeconds       2   Math PI    6000       time getMilliseconds       ctx translate 0  28 5     ctx drawImage moon  -3 5  -3 5     ctx restore       ctx restore        ctx beginPath       ctx arc 150  150  105  0  Math PI   2  false      ctx stroke        ctx drawImage sun  0  0  300  300       window requestAnimationFrame draw             init        lt  script gt      lt  body gt      lt  html gt

User · Answer

It happens because you call it before DOM has loaded  Firstly  create the element and add atrributes to it  then after DOM has loaded call it  In your case it should look like that   var canvas   document createElement  canvas    canvas id        CursorLayer   canvas width    1224  canvas height   768  canvas style zIndex     8  canvas style position    absolute   canvas style border      1px solid   window onload   function         document getElementById  CursorLayer

User · Answer

Via Jquery        lt canvas  gt      id   mycanvas   height  500  width  200      http   jsfiddle net 8DEsJ 736

User · Answer

Alternative Use element  innerHTML  which is quite fast in modern browsers  x000D   x000D  document body innerHTML     lt canvas width 500 height 150 id  CursorLayer  gt         TEST  var ctx   CursorLayer getContext  2d    ctx fillStyle    red   ctx fillRect 100  100  50  50   x000D  canvas   border  1px solid black   x000D   x000D   x000D

[javascript] HTML5 Dynamically create Canvas

Examples related to javascript

Examples related to html

Examples related to canvas