CODEWITHSUNDEEP
javascripthtml
H. Pauwelyn
H. Pauwelyn

Reputation: 14320

Place elements to canvas using JavaScript

I'm making a little game. I will place some div-tags into a canvas-tag by JavaScript. This is my code: 

document.addEventListener("DOMContentLoaded", function () {
    init();
});

function init(){
    draw();
}

function draw(){

    var number = Math.round((Math.random() * 31) + 20);
    var cnv = document.getElementsByTagName("canvas")[0];

    for (i = 0; i <= number ; i++){

        var div = document.createElement('div');

        //breedte
        var length = Math.round((Math.random() * 31) + 20);
        div.style.height = length + "px";
        div.style.width = length + "px";

        //locattie
        div.style.top = Math.floor(Math.random() * (cnv.height - 100))+ "px";
        div.style.left = Math.floor(Math.random() * (cnv.width - 100))+ "px";

        //toevoegen
        div.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ")";

        cnv.appendChild(div);
    }
}
canvas{
    width: 100%;
    height: 500px;
    background-color: #898989;
}

div {
    position: absolute;
}
<canvas id="playarea">
</canvas>

So you can see, it displays only a empty canvas. Only if I implement the element, I can see the generated div-tags. I have also try it replace some properties in the CSS code of my div. But it don't work...

Can anyone help me? Thanks

Upvotes: 0

Views: 79

Answers (2)

fastclemmy
fastclemmy

Reputation: 56

canvas isn't intended to encapsulate div-s like this. You should try to use native canvas methods like fillRect() for example, see this MDN tutorial

With a quick example:

document.addEventListener("DOMContentLoaded", function () {
    init();
});

function init(){
    draw();
}

function draw(){

var number = Math.round((Math.random() * 31) + 20);
var cnv = document.getElementsByTagName("canvas")[0];
var ctx = cnv.getContext("2d");
var top = 0;
var left = 0;
var size = 0;

for (i = 0; i <= number ; i++){

    ctx.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ")";

    top = Math.floor(Math.random() * (cnv.height - 100));
    left = Math.floor(Math.random() * (cnv.width - 100));
    size = Math.round((Math.random() * 31) + 20);

    ctx.fillRect(left, top, size, size);

    }
}

Upvotes: 3

Andreas Louv
Andreas Louv

Reputation: 47137

Nodes inside a canvas object will only be shown in browsers that doesn't support the canvas element:

<canvas>Your browser <em>doesn't</em> support the canvas element!</canvas>

If you want to add elements on top of your canvas you could consider adding a wrapper and add the elements to it:

<div class="canvas_wrapper">
  <canvas></canvas>
  <div class="canvas_child">My added element</div>
</div>

And some css like this:

.canvas_wrapper { position: relative; }
.canvas_child { position: absolute; top: 100px; left: 100px; }

Upvotes: 2

Related Questions