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.
Related
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>?
I was going over a tutorial on html5 canvas. One of the sections is teaching you how to draw canvas based on an image. While everything works out fine, I am puzzled about why using canvas over simply loading the image using <img>.
You could do image manipulation to the original in this way: think Instagram-style filters or ChromaKey (green-screen).
Games which use sprites,
3D games with textured-polygons,
Image-editing functionality,
Cropping and scaling in real-time,
Image-filters in real-time...
If you're just using canvas to load an image, that's going to be a lot of work for absolutely no payoff, because you actually have to LOAD an image into an img element, or an Image() object, before you can even use it on the canvas.
I am developing a visualization in form of graph with edges that may be curved and vary in color and thickness. The nodes on the graph contain an image and some text. The graph is animated and interactive (you can click and move the nodes) and uses force directed layout.
I want to support at least a large portion of smart phone browsers such as those on android and iphone devices as well as any modern browser on the desktop.
Is it possible to create such visualization without using either canvas or SVG?
If I must use one, which one would be a better choice?
It is certainly possible to do so with both technologies, but you should have in mind that they have different approaches.
I recommend you use canvas (there are lots of good libs out there such as kinetic) because android 2.x doesn't support svg :(
Definitely SVG if you want tooltips/hover effects. Because the elements in the SVG image are just XML tags you can add mouse event handlers to them in the same way you would elements in the DOM.
I was wondering, without using images, how can I show a diagram in an html page? From a 3rd party, I am getting data with coordinates, labels, etc. I need to convert this into something graphic. I suppose SVG is doable but IE has problems with SVG in IE < 9... or so I read. What about canvas? Problems?
Any other options out there?
And, to make things more complicated, at some point, users should also be able to manipulate the diagram. That is, move 'objects' within the diagram around to make it look 'better.'
Thanks
both SVG and canvas are options, but you will probably want to just use a diamgram javascript library without having to write the SVG or canvas code yourself, like raphael, http://raphaeljs.com/
I'd suggest checking out a few of the existing js libraries for drawing graphs. I've listed a bunch of them here.
These libraries have already solved the crossbrowser issues for you, and are usually compatible with all browsers down to IE6.
I'm creating a web page, and I can't (with html code) add a draw box*?
*It's a box, like a Microsoft Paint, only with one brush, where the user make a draw by a click draged.
The following links may be helpful:
Doodle, A Demo Drawing Program
Raphaël
DojoX
Canvas
Also, have a look at this StackOverflow thread: Drawing on top of an image in Javascript.
Steve
I'm afraid there is no simple way to do what you want to do. The current version of HTML (4.01, I believe) does not support this at all. HTML 5, which is still in development, has a <canvas> element that can be used with javascript to create the kind of thing you are looking for, but only the latest versions of Firefox, Chrome, Opera, and Safari support it.
See: w3schools.com/tags/html5_canvas.asp for an explanation of the <canvas> element and dev.w3.org/html5/spec/#the-canvas-element for the full (uncompleted) specs.
See: http://devfiles.myopera.com/articles/649/example1.html for an example of the kind of design you are looking for.
There's no HTML element that's a "draw box". You'll need to find something built in JavaScript/Flash/Java and drop it into your page.
Try CanvasPaint or this other Canvas Painter.