How i add html DOM Element on canvas using create js

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

  • PreloadJS to pass to background-image
  • Unable to preload and display SVG with CreateJS
  • `Preload.js` failed to load some files on Android devices
  • Using Meteor with Adobe Flash CreateJS Toolkit
  • SharePoint 2013- Add custom web application/page which uses files from other folders
  • Combine two different graphics into a single one with Easel.js
  • PreloadJS is undefined(Windows 8 game programming)
  • Add class to canvas element HTML5 & CreateJS
  • render a tile map using javascript
  • Incorrect mouse event zooming in windows surface using easeljs / createjs
  • What do you achive by using this code?
  • SharePoint 2013- Add custom web application/page which uses files from other folders
  • One Solution collect form web for “How i add html DOM Element on canvas using create js”

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