2

Is it possible to load async a HTML5 canvas (a js file) from server and render it in a HTML page?

This is my scenario: I have to display a diagram in a HTML page. The diagram is displayed as a HTML5 canvas. Because the diagram can be very complex it can take some time to be generated. What I'd like to do is to display the HTML page to the user and show a loading indicator while the diagram is generated on the server. The diagram is generated as a js file containing the methods to render the diagram on the canvas.
After the diagram is generated it is loaded in the page and rendered in the canvas.
What I don't know is how to load the js file from the server once it has been generated and execute it on the client in order to render the diagram.

If my approach is not valid, I'm open to suggestions.

Surubelnita
  • 107
  • 9
  • Questions without code example are rarely as clear as this one. I suppose you could use websockets or polling in order to be notified when the diagram is finished being generated, and then use one of SO answers about how to execute a js file asynchronously loaded. For example: http://stackoverflow.com/questions/7718935/load-scripts-asynchronously – axelduch Feb 18 '16 at 14:42
  • @axelduch thanks for the link, those answers might do the trick. – Surubelnita Feb 18 '16 at 16:24
  • 1
    Depending on the goal of the diagram, any chance that SVGs would make more sense? Rather than downloading your own made-up data format for "draw instructions" that the server is writing (or, scarier, evalling pure JavaScript) you can use the well-standardized SVG language for it; and any text-concatenating server can put one together. – Katana314 Feb 18 '16 at 18:48
  • If you don't need to support IE/Edge you can use [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) which is an html2.0 server-push technology. Otherwise (as @axelduch says) you can use [websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) to set up a duplex messaging session with the server. And if all else fails you can just have the client do polling until the server finishes its job. – markE Feb 18 '16 at 20:48
  • @Katana314 for the first version the diagram will be static with support for zoom. Later I'll have to add some interactivity (moving objects on the diagram, etc). I worked a bit with the Canvas this is why it was my first approach. I haven't worked with SVG in a webpage, but I'll consider this option too because it's no big deal for me to generate a SVG on the server instead of Canvas js code. At this moment I'm evaluating technologies for building a proof of concept. – Surubelnita Feb 19 '16 at 07:51
  • @markE I do have to support Edge (IE I'm not sure right now) and mobile browsers. – Surubelnita Feb 19 '16 at 07:52
  • @Surubelnita OK, well good luck with what you choose. SVGs should be modifiable through JavaScript - it's an area that has less general documentation, but be aware that like an `iframe`, the page will treat it like a second document, so any functions you'd normally call that start with `document.` will need to have a reference to the SVG's document. – Katana314 Feb 19 '16 at 14:12

0 Answers0