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 · 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

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

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

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

User · 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   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   x000D   x000D

[javascript] HTML5 Dynamically create Canvas

Examples related to javascript

Examples related to html

Examples related to canvas