0

i was trying to insert this h1 inside canvas . but it does not show . anyway to integrate w3school html inside canvas without creating text using easeljs procedure . i added this inside canvas .

  <body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="300" style="background-color:#ffffff">
            <h1>  i like this </h1>
            </canvas>


     <script>
        function init() {
            canvas = document.getElementById("canvas");
            exportRoot = new lib.Untitled1();

            stage = new createjs.Stage(canvas);
            stage.addChild(exportRoot);

            stage.update();

            createjs.Ticker.setFPS(24);
            createjs.Ticker.addEventListener("tick", stage);
        }
        </script>
        </head>

        <body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="300" style="background-color:#ffffff">
            <h1>  i like this </h1>
            </canvas>
Salma
  • 31
  • 6
  • As a follow up, is there some reason you aren't adding the text in Flash and then exporting? – Andrew Jun 01 '16 at 14:35

1 Answers1

1

Child elements of the canvas tag are treated like alternate content and will not display if the browser supports the canvas tag.

Since you are already using createjs, you can add text via the createjs text object. Here's an example from the docs.

var text = new createjs.Text("Hello World", "20px Arial", "#ff7700");
text.x = 100;
text.textBaseline = "alphabetic";
stage.addChild(text);
stage.update();

Alternatively, you could position an html text element over top of the canvas tag with css as discussed here.

Community
  • 1
  • 1
Andrew
  • 1,030
  • 13
  • 24
  • 1
    One clarification: Elements you put inside a canvas in HTML *are* valid, and in fact are processed by the browser -- but are not displayed, unless the canvas element is not supported by the browser. There are a lot of code examples online that use child elements to show a "canvas is not supported" message in those browsers. – Lanny Jun 01 '16 at 16:45