- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
I want to draw a timeline using the <canvas> element but I'm having problems getting a handle on it.
Here is the canvas declared in the index.html file:
<div id="uib_page_4" class="upage-content vertical-col hidden">
<div class="widget uib_w_93 d-margins eNevillizer" data-uib="media/text" data-ver="0">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<canvas id= "dailycanvas" height="300" width="250"></canvas>
</div>
</div>
</div>
(the size here is just for testing, ideally I would want to adjust this according to the size of the window although I'm not sure exactly how that can be done but I'm not there yet ;-))
Here is the javascript to get the canvas object:
canvas = document.getElementById("dailycanvas").innerHTML; // (I've tried with and without ".innerHTML")
context = canvas.getContext("2d");
which throws the following error:
Uncaught TypeError: undefined is not a function
I'm using App Framework with appframework.js and appframework.ui.js. Do I need other libraries?
Thanks in advance for any insights you may have on this
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Those lines should work (without the innerHTML bit), I recommend you add a "var" in front of them. See this tutorial from Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Paul,
Thanks for your help.
I added the vars and removed the .innerHTML and no longer get the error. I've tried adding some code from the link you sent me and that works but I still can't get the width of the canvas which shows up as undefined. I'll continue to go through the tutorial and hopefully I'll find what I'm doing wrong.
Have a great day.
![](/skins/images/0B743BCD37FD8EED134343C203D4D429/responsive_peak/images/icon_anonymous_message.png)
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page