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?

Possible duplicate of Add canvas to a page with javascript

Vadzim
– Vadzim

2016-06-04 13:01:34 +00:00
Commented Jun 4, 2016 at 13:01 — Vadzim
– Vadzim, Commented Jun 4, 2016 at 13:01

Neil · Accepted Answer · 2017-09-24 06:47:07Z

148

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

Just do the following:

document.body.appendChild(canvas);

Example:

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";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

// below is optional

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);

edited Sep 24, 2017 at 6:47

Neil

1,33112 silver badges25 bronze badges

answered May 18, 2012 at 12:22

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Павел Иванов Over a year ago

how to do that without appending? like document.write to current position?

kannan D.S Over a year ago

how to append canvas to a particular div $("div").appendChild(canvas) is that possible

Octopus Over a year ago

To clarify, you don't just do the following, you still have to create it. The best answers usually include all the info. But yeah.

goblin01 · Accepted Answer · 2018-03-02 16:07:55Z

2

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");
}

answered Mar 2, 2018 at 16:07

goblin01

1014 bronze badges

3 Comments

pasx Over a year ago

This is wrong, creating a new element does not trigger window.onload...

goblin01 Over a year ago

It does not, but you can't call too fast elements after created. Creating element and calling it will return null, but if you wait a bit or add window.onload it will return HTMLElement.

pasx Over a year ago

OK I understand better what your point is. It makes sense in the context of a page being loaded but I tested it in the context of an already loaded page.

Michael Yagudaev · Accepted Answer · 2016-05-09 23:19:29Z

1

Via Jquery:

$('<canvas/>', { id: 'mycanvas', height: 500, width: 200});

http://jsfiddle.net/8DEsJ/736/

edited May 9, 2016 at 23:19

Michael Yagudaev

6,1393 gold badges51 silver badges55 bronze badges

answered Jul 17, 2015 at 0:26

Razan Paul

13.9k3 gold badges74 silver badges61 bronze badges

1 Comment

boxtrain Over a year ago

jQuery is as usual unnecessary to do this simple task.

Pooja · Accepted Answer · 2019-11-21 06:54:42Z

 <html>
 <head></head>
 <body>
 <canvas id="canvas" width="300" height="300"></canvas>
 <script>
  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();
   </script>
   </body>
   </html>

Kamil Kiełczewski · Accepted Answer · 2020-10-06 07:57:35Z

1

Alternative

Use element .innerHTML= which is quite fast in modern browsers

document.body.innerHTML = "<canvas width=500 height=150 id='CursorLayer'>";


// TEST

var ctx = CursorLayer.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 50, 50);

canvas { border: 1px solid black }

edited Oct 6, 2020 at 7:57

answered May 29, 2019 at 21:41

Kamil Kiełczewski

93.8k34 gold badges401 silver badges375 bronze badges

Collectives™ on Stack Overflow

HTML5 Dynamically create Canvas

5 Answers 5

3 Comments

3 Comments

1 Comment

Comments

Alternative

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

1 Comment

Comments

Alternative

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related