Canvas using onsen ui

0
votes

Hi I am trying to use a canvas in one of my onsen ui pages. I have used tabbar for page navigation and used <script type="text/ons-template> to create my ons-template. In my ons-template i have inserted a <canvas id="myCanvas">, but when i try to getElementById("myCanvas") in my javascript, I get a null value.

Do we use a diffrent method when getting the canvas element within an ons-template using onsen-ui? or is there an alternative way to drawing images using onsen. My main aim is to merge two pictures together.

1
htmlonsen-ui

1 Answers

0
votes

Use <ons-template> instead

index.html:

<ons-tabbar>
  <ons-tabbar-item page="home.html" label="Home" icon="ion-home" active="true"></ons-tabbar-item>
  <ons-tabbar-item page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tabbar-item>
  <ons-tabbar-item page="tags.html" label="Tags" icon="ion-ios7-pricetag"></ons-tabbar-item>
  <ons-tabbar-item page="settings.html" label="Settings" icon="ion-ios7-cog"></ons-tabbar-item>
</ons-tabbar>

<script type="text/ons-template" id="home.html">
  <!--ons-template id="home.html"-->
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>
  <div id="myDIV"></div>
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
<!--/ons-template-->
</script>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  <div id="myDIV2"></div>
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
  <ons-toolbar>
    <div class="center">Feed</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

Javascript:

ons.bootstrap();
alert(document.getElementById("myDIV"));
alert(document.getElementById("myDIV2"));

Here you see the first alert will be null but the 2nd alert, we can see the DIV. See the above live sample at http://codepen.io/vnguyen972/pen/eagAr

Hope this helps!