CODEWITHSUNDEEP
htmlhtml5-canvas
dwjohnston
dwjohnston

Reputation: 11813

Are divs more computationally expensive than canvas?

I've been playing around with silly things like this: http://jsfiddle.net/dp5rvd91/5/

Where I use dynamically generated divs to create images.

enter image description here

for (var i = 0; i< its; i++){

    var size = i; 
    var angle = dAngle * i; 
    var o = Math.sin(angle) * range; 
    var a = Math.cos(angle) * range; 

    var left = cx - a + i;
    var top = cy - o+ i; 



    var c = myservice.rgbToHex(i, i*2,i); 

    var style = "".concat ("position: absolute; left:", left, "px; top:", top, "px; width: ", i, "px; height: ", i, "px; background-color: ", c, ";"); 
    console.log(style); 
    $scope.divs.push(style);

}

<!-- HTML-->
<div ng-repeat = "d in divs" style  =  "{{d}}"/>

Just wondering - is this computationally inefficient, compared to to say using an HTML5 canvas?

Upvotes: 3

Views: 160

Answers (1)

Shai UI
Shai UI

Reputation: 51928

Yeah you probably want to do this in canvas, besides if you're looking to create an image, going from canvas to image is easy.

But if you're doing it with divs you'd have to use html2canvas or some other library to turn it into an image.

As far as if it's more computationally expensive it depends.

a. 1 canvas is more expensive than 1 div.

b. But you have many many divs, it'd probably be more expensive than 1 canvas.

regardless, the picture you made has canvas written all over it. it's kind of funny you did it with divs. but whatever works. for a computer it's a joke regardless if we're talking about say less than a hundred divs. But if we're talking about thousands of divs then you might run into a problem though, the cpu will start to cry, so it'd be much more efficient to do it with canvas.

Upvotes: 1

Related Questions