javascript - HTML5 - Draw on canvas after timeout -

I am trying to draw a line on a canvas after a timeout period. One of the "Line Two" parameters is being sent a value from a variable which is being declared in another script and given in the form of a window. Var ....

I have a console log set executed at the same time as the variable in the carvas script is also used.

OnLoad executes everything in the same way as after the expiration of the console, the console shows that there is a value in the variable, but the canvas line is not ready.

At first I could not find any time constable and the variable was coming back undefined. I opted to go with a timeout, because I still do not fully understand the callback.

Any advice would be greatly appreciated!

  & lt; Script & gt; Window.setTimeout (render, 8500); Function render () {var canvas = document. GetElementById ('canvas'); Var reference = canvas.getContext ('2d'); Var end = window.testVar; Context.beginPath (); Context.moveTo (4, 28); Context.lineTo (end, 28); Context.lineWidth = 10; Context.stroke (); Console.log (end); } & Lt; / Script & gt;  

context.lineTo expects a number, So your testVar in a number

For example:

  var end = parseInt (window.testVar);  

Your code works fine for me ... the line pulls itself after the specified delay:

  var canvas = document.getElementById (" Canvas "); Var ctx = canvas.getContext ("2D"); Var cw = canvas.width; Var ch = canvas height; Window.testVar = 23; Window.setTimeout (render, 2000); Function render () {var canvas = document. GetElementById ('canvas'); Var reference = canvas.getContext ('2d'); Var end = window.testVar; Context.beginPath (); Context.moveTo (4, 28); Context.lineTo (end, 28); Context.lineWidth = 10; Context.stroke (); Console.log (end); }  

  body {background color: ivory; } Canvas {boundary: 1 px solid red;}  

  & lt; Canvas id = "canvas" width = 300 height = 300 & gt; & Lt; / Canvas & gt;