How can I add html DOM Element on canvas using create js?

Question

below code is not working for adding dom element on canvas

        var stage = new createjs.Stage('mycanvas');
        var html = document.createElement('div');
        html.id = 'ab';
        html.style.height = '50px';
        html.style.width = '100px';
        html.style.backgroundColor = '#000000';
        $('body').append(html);
        var gg = new createjs.DOMElement(html);
        gg.x = 0;
        gg.y = 0;
        stage.addChild(gg);
        stage.update();

Lanny · Accepted Answer · 2014-06-06 21:47:41Z

6

You need to set the position to "absolute", and then set the top and left properties. DOMElement simply sets the transform of the object.

Here is a quick sample, using a Tween to tween the shape. http://jsfiddle.net/TeVZ6/

var stage = new createjs.Stage("canvas");

var html = document.createElement('div');
html.id = 'ab';
html.style.height = '50px';
html.style.width = '100px';
html.style.backgroundColor = '#000000';
html.style.position = "absolute";
html.style.top = 0;
html.style.left = 0;

document.body.appendChild(html);

var gg = new createjs.DOMElement(html);
gg.x = 20;
gg.y = 20;
stage.addChild(gg);
stage.update();

createjs.Tween.get(gg).to({x:400}, 1000);
createjs.Ticker.addEventListener("tick", stage);

answered Jun 6, 2014 at 21:47

Lanny

11.3k1 gold badge24 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

How can I add html DOM Element on canvas using create js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related