1

my question is very simple, actually I want to put the iframe element (which can contain video, webpage, image, pdf, etc.) to be displayed on the element, it doesn't require to be editable, just display is enough

Eldon Lesley
  • 915
  • 6
  • 19
  • 38

1 Answers1

3

I am not sure whether you want to display it on top of it or draw it onto the canvas. The first is possibly by absolutely positioning the element above the canvas (or below it if you want to draw additional things over it). The second is impossible (except if you are running in a chrome extension or firefox add-on which isn't the case I assume (if it is the case than the function is called DrawElement on the cavnas context)). There have been some projects which attempt to manually make a 'screenshot' of a page ( Can you take a "screenshot" of the page using Canvas? ), but that still wouldn't work with pdf files. Video content in a html5 video tag can similarly be drawn to the canvas manually, although again the controls etc. would have to be drawn manually.

The reason why it's not possible to draw the entire element to the canvas is as a security precaution to prevent developers to get information about external pages (although there have been discussions about allowing this and accepting that the canvas will get 'tainted' meaning nothing can be read from it, but the consensus was that positioning the element below the canvas is far more usefull in that case). If you want to read into these security considerations you should look up Bug 69044 in the webkit engine.

Community
  • 1
  • 1
David Mulder
  • 26,123
  • 9
  • 51
  • 114
  • i want to draw it onto the canvas, so it will be impossible then to draw external pages/apps? – Eldon Lesley Mar 28 '12 at 08:34
  • If it's external, than yes, it's practically impossible as I outlined above. What is it you want to do? Maybe I can point you in another direction how you could solve your problem. – David Mulder Mar 28 '12 at 08:37
  • I have a canvas element with bgcolor and some text elements which is done already, then I need to draw shape,image which is possible to do with canvas, the next step is to put a webpage/pdf/video onto the canvas. Actually I have an object which contains all of those elements(text, shape, video, etc.) created on .NET and then I serialize the object to a JSON format and the goal is to display it in the browser, and I chose canvas method, but the only problem is to display the pdf, webpage, or any external apps elements – Eldon Lesley Mar 28 '12 at 08:43
  • What's the problem in that case with displaying the iframe in front of the canvas? As long as you don't plan on doing anything weird with it (which wouldn't be allowed either way) than that should work perfectly fine and any necessary normal transformations could be done with css. – David Mulder Mar 28 '12 at 08:48
  • because canvas can't display the pdf, webpage, etc. so I need an iframe, the only problem now is to display the iframe inside/on the canvas, or if there's any other method with the canvas I'm open to anything – Eldon Lesley Mar 28 '12 at 09:06
  • As I said, above or between canvases should do the trick, what canvas functionality do you need for refuting that option? – David Mulder Mar 28 '12 at 09:26
  • my single object contains many elements(text,etc.), and that single object is displayed on a single canvas, if there's a pdf/webpage elements inside the object, then they should be displayed on the same canvas as the other elements.. well, do you have an example for your methods? – Eldon Lesley Mar 28 '12 at 09:38
  • If I understand you correctly you have a json object like [{position:{x:10,y:10},type:"text",data:{title:"object title"}},{position:{x:10,y:30},type:"video",data:{url:"http://someurl/"}}] next you loop over those items and draw the specific items onto the canvas, yes? What I am suggesting is that if you encounter something that can be displayed in an iframe you simply add an iframe to the dom structure and position it exactly above the iframe where you would want it. – David Mulder Mar 28 '12 at 09:49
  • I dont think it's the solution, since I also have a json Object which defines the "page" information, "page" is a container for all of the elements,basically the structure look like this: ...etc and I translated the page into canvas, which also contains element, if I put an iframe for (example) a pdf element, then the pdf will be displayed outside the canvas, which is not the case I want the pdf to be inside the canvas like the original information that the pdf element is inside the "page" – Eldon Lesley Mar 28 '12 at 11:56
  • Which, as I explained previously, isn't possible, the canvas is meant as a canvas, *not* as an alternative to the entire dom model. You should use the canvas for stuff which isn't possible in the dom (shapes) or for stuff where the dom isn't fast enough (e.g. games). Otherwise you should for example use combinations (as seems now the case). – David Mulder Mar 28 '12 at 12:40