A problem with canvas

[Anne_B_]

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

[PaulF_IntelCorp]

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

[Anne_B_]

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.