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();

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();

• javascript
• createjs

Share Improve this question Follow edited May 16, 2018 at 10:52 asb14690 asked Jun 6, 2014 at 15:24 asb14690asb14690 1,83733 gold badges1616 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/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);