HTML5 Dynamically create Canvas
canvas, html, javascript
Solution
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);
Problem
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?