Would it be possible to create a virtual web browser, inside your existing web browser, using canvas, to achieve near pixel perfect representation of websites across all browsers?
Take a look at http://html2canvas.hertzen.com/ - It's a HTML renderer using a Canvas element. There are a few limitations (some CSS3 properties don't work) and you can only do static images with it. But it's still very cool.
Also it's still going to be browser-specific in terms of exact positioning of elements.
Theoretically: Yea, maybe... no.
Practically: Hell no.
You can't play flash / silverlight / java applets on canvas. Also, you'd have to:
Manually parse the DOM,
Apply CSS,
Execute JS,
Render everything,
Make input elements,
dropdown menu's,
hyperlinks,
mouseovers,
and all that kind of interaction work,
And whatever else I've forgotten.
Like proper Anti-Aliasing
Only with tremendous difficulty.
Why not just use <iframe>?
Related
I'm developing a Math-based game/app using HTML5 technologies (HTML5 + CSS3 + javascript) for the upcoming Blackberry 10 Devices, to be ported using Blackberry WebWorks.
The game requires generation of lots of random numbers. I'm currently generating them in "p" tag and styling them. But some guy suggested me not to use Stylesheet so much and rather use Canvas API.
Is there any effective/performance-improving reason to listen to the suggestion or it is just any suggestion ?
I look it at this way:
HTML tags have pre-defined properties and behaviour such as padding, floating, relative positions, etc. Making use of these tags ensures that the developer does not have to write tons of code to mimic this trivial behaviour. Think of building a list: using <ul> and <li> will take care of the positioning for you. In canvas you need to create this from scratch or look for a library. HTML/CSS IMO is perfect for Web Apps. In terms of performance, make sure your animations are done in the GPU (using 3d transforms) and the performance is great. It is easy to respond to different screen sizes when using HTML/CSS too.
Games tend to use absolute positioned elements that are manipulated directly (example, move player from 100px to 150px) and are therefore easier to work with in Canvas. Performance-wise, canvas2d operations are hardware accelerated, so it should be as smooth as using HTML/CSS.
I'm implementing a HTML5 game using canvas. Now I'm thinking about making all text overlays like tooltips, speechbubbles, infowindows and so on using HTML elements with position absolute over the canvas. So I can use many effects and transitions CSS3 offers.
But I'm not sure about performance. These overlays have to be added and removed frecuently (is something MMORPG like, so there will be a lot of speechbubbles and so on).
There are probably 2 questions regarding performance:
DOM traversal to add/remove. Maybe a cache can help?
HTML and CSS3 itself.
The other option is to manage these elements in the canvas itself, drawing them each frame. But maybe I have then again a performance penalty, because of the extra code, timeouts and stuff I would have to add, to achieve similar effects like in CSS3. And traversal of some data structure would be needed anyways.
Any advices, opinions, experiences?
Thanks in advance.
Consider using only one of the mentioned two technology. May be you can release that application in mobile or tablet. I think on these devices would be issues with handling both the same time. And another thing: if you stay in canvas there would be no worries about compatibility. Its not a techy but a thought-provoking answer.
The single best reason for using the DOM for UI elements in HTML5 games is event handling.
If you draw everything on canvas you will need to write your own logic to handle clicks and decide what has been clicked on, which can soon become very complex, expecialy if you have multiple layers of interface.
With DOM elements (especially when using a library like jQuery) this is trivial, and you can create a rich and interactive UI with minimal effort.
The only downside I can think of is that you may encounter browser inconsistencies, especially if using CSS3, but again jQuery will help with this.
I suppose another downside is that once you go down the DOM route, your game is always going to be a browser game, whereas if it was 100% canvas, there would always be the possibility of porting the code to another language and making it native, but I guess that would only be a downside for some people.
One way to approach this is to use a "dynamic" image map behind your canvas object. Then you can use the dom as required. Note you will need to pass the clicks on the canvas through to the image map.
I plan to build a game an have everything in mind. I know HTML, CSS and Javascript good and it would give me cross browser support so going to use it for sure.
I have a need where I need to show a div (rectangle) and then upon some action animate it to the other shape which you can better see in this picture
Can I animate DIV element or I would need to use SVG or Canvas otherwise?
For drawing arbitrary shapes in the browser, I would suggest using either Canvas or SVG.
I would avoid trying to 'drawing' using HTML <div> elements and CSS. This is possible, but it is a hack at best and can get quite messy, and I certainly wouldn't want to write a game using this technique.
So your best choices are definitely either SVG or Canvas.
The choice of SVG vs Canvas depends as much on what platforms/browsers you want to support as it does on the properties of the two technologies.
Obviously you already know the main difference between SVG (vector graphics) and Canvas (pixel graphics), but the two have differing browsers support as well, which is important to take into account.
With the limited information you've given, I would say that SVG looks like the most natural fit for what you're doing. However, SVG is not yet supported by the Android browser, so if you want your game to run in mobile devices, you need to take that into consideration. This would probably mean you need to use Canvas instead.
If you're sticking to the desktop, all modern browsers support both Canvas and SVG. Obviously both are missing from IE8 and earlier, but IE does support a competing format called VML, which is an XML-based vector language similar to SVG.
If you want to support IE8 (and it's quite possible that you don't!), there are javascript libraries available for IE which will render both Canvas and SVG graphics using IE's VML engine. Obviously this works very well for SVG as the two languages are quite similar. I've heard slightly more mixed reports about the canvas conversion, but you may want to give it a try. Bear in mind that IE8's Javascript engine is quite slow, so a javascript-based graphics format conversion may not give you sufficient performance to be useful in the context of a game.
Hope that helps.
Is it possible to create a html element inside a Canvas, draw it and than make it, for example rotate using CSS3?
And if it is, does it follow the Canvas settings (for example, lighting of some sort)?
Just a thing that popped into mind, might make an application i'm working on a lot lighter.
No. Any content inside canvas element is only displayed when canvas isn't supported.
I think we can only use css3 operator in canvas and not inside canvas, in some element like img or div:
I think it's possible Look at:
http://christianheilmann.com/2011/09/05/animating-with-canvas-and-creating-css3-animations-with-javascript/
Here is a link for a great Blender 2.6 output plugin that exports a CSS3 HTML page for viewing in your browser. I'm looking to also utilize Jmpress for presentation. http://sokra.github.com/jmpress.js/#/home
I'm using the Blender script now and it works very well (no crashing or freezing). The HTML produced displays fine, now I'm connecting Jmpress to get a final product.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.