I am a complete novice at web development and I am wondering a few things about graphics rendering using JavaScript (not Flash or some other plugin). For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5? I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5. I also remember seeing animations in web pages during the 90s that were done in pure JavaScript.
So:
1) Is such graphics rendering possible using pure JavaScript?
2) If so, which APIs or libraries are being used?
3) Is it possible to decorate standard HTML controls with arbitrary graphics?
I am trying to determine the bounds of what is possible in a web-based UI.
For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5?
Yes. Have a look at SVG, which has been around in some form or another since... 1992 or thereabouts.
There are plenty of docs and tutorials on the Mozilla Developer Network.
I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5.
You saw SVG, which Google has used for Google doodles in the past and still uses for all sorts of stuff (portions of Google Maps on some platforms).
Related
Short version: Kieth Clark has a 3D html fps shooter demo. It uses 3d tansforms on html5 elements to produce a 3D world experience. It is not VR. Is there an API to view it stereoscopically?
I have a similar engine. I came up with a way to view it stereoscopically using Cardboard-style viewer, 3D TV/Monitor, or red/cyan anaglyph glasses. I had to use a pair of iframes, however, and load a copy of the "world" document into each frame, however.
This doubles the load on the gpu, however, requires duplicates of all changes to "the world" for both iframes, and workarounds for focusable items such as textareas. This all works great, but diminishes the capacity for detail without RAF noticably slowing down and getting jumpy. Especially true in Firefox on mobile, and of course there is also the added problem of security limitations on iframes.
If theres an API to just view and control a 3D html5 page in stereo without explicitly duplicating everything that would make things a lot simpler and more efficient.
I'm using a Google Chrome on Galaxy Note 3 as my standard-level target-device, if anyone needs to know.
Long version (old):
I have a 3d game I'm writing with native html5/css3/javascript. It is primarily for mobile and already contains a fully-functional camera system with the ability to zoom in or out of first-person, second-person, overhead etc, rotate the yaw and pitch of the view, as well as location on the map around the avatar, etc. Is there an easy way to view it stereoscopically? It will be embedded in an Android app, or at least accessed through one, or through Chrome as a web-app. I thought Chrome Dev with VR Shell would be a possibility to try it out and hopefully integrate into an app eventually. Not having luck with that yet. Theoretically, I just need to be able to view an ordinary html5 page that has css3 3d transforms. For example, if you had a 3d cube made of divs or whatever, to view it with two points of view, one for each eye, without changing anything in the page itself. Basically, if you could view anything 3d in the page stereoscopically, much like the VR Shell sounds like, it should work. All I seem to come up with is how to turn on the flag in Chrome Dev, but I'm not seeing anything to actually activate it. It's been fully restarted etc. The page is already 3d and fully-functional with orientation control in first-person or otherwise. All I seem to find are how to turn it on or about 3d videos. Can this be done in Googles VR libs for Studio without using all the other stuff? I just need the second eyeball.
Ok. Was hoping an api existed for this, but my solution was to make a parent document with two iFrames and load the doc with the 3d tranforms into both iframes. Then offset the perspective-origin in each about 1% (i.e. 49% in one and 51% in the other). Worked great without added mods using device orientation, but obvi not for mouse control. Ideally, both iframed documents should be controlled from js in the parent doc. Downside is you have to control two objects for every change, and complications arise if you have inputs or textareas that take exclusive focus. Fixed all that, but this is the down-low version of the solution.
I would like to do a a web Paint program.
Basically I would like to mimic the Windows Paint program in a web application.
The features that I don't really know how to implement are:
the drawing of 2D shapes (line, circle, etc) in a web browser
drag and drop
resize dynamically (seeing preview as you are moving the mouse for resizing)
I am guessing there will be HTML5, CSS3 and Javascript. I am mainly wondering if there are Javascript libraries that I could use to make my life easier.
Best regards
Yes, you want to use canvas (the 'new flash'). It is a HTML5 element widely supported in newer (mobile) browsers.
Here are some links to get you started:
a complete ms-paint copy salvaged from the archive (last one I could find)
http://mudcu.be/sketchpad/
http://dev.opera.com/articles/view/html5-canvas-painting/
http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program-Touch-and-Mou
Some popular library's are:
fabric.js, KineticJS and Processing.js
Good luck!
I'm trying to understand what people use canvas for?
I see it on job postings I read about it in Definitive JavaScript, but I don't quite get what it is used for.
I understand that you can draw 2d or 3d ( usually 2d ) objects but why no just use Gimp or Photoshop and upload the image.
Is it so you can create dynamic images based on say...user-specific data?
What is a practical example or perhaps a link to a professional implementation of canvas ( Definite JavaScript show basis stuff like drawing circles ).
MDN Tutorial
I have used a canvas to draw a graph, and it falls back to requesting a PHP-generated image if the browser doesn't support <canvas>. It's always a good idea to delegate processing from the server to the client, as this places less load on the server. In other words, instead of the server going "here's the stuff", it's more like "here's the data and the instructions to show it".
Another use I've seen is to highlight areas of an imagemap when moused over.
<canvas> is central in HTML5 game development, since it is used to draw the entire game viewport. Without it, there is no game.
Is it so you can create dynamic images based on say...user-specific data?
Yes
We used <canvas> to build interactive design editor for apparel in our e-commerce store — http://printio.ru/tees/new
The kind of interactivity we provide was only possible with Flash until recently.
Even on back end, we use Node.js and <canvas>-based image processing+generation to take data from online editor and create designs that are later used in store. These canvas-generated designs are eventually printed out on tshirts, mugs, caps, bags, and so on.
I think that's a pretty practical example :)
This is all done via Fabric.js canvas library (developed by us as well).
<canvas> is used for better Performance. <canvas> is much more faster and dynamic than jpeg or anything else. Example: http://www.profistart.com/internetseiten.html here was <canvas> used for Background.
I have to develop an image viewer application. The designed application should have the following features
Zoom in functionality
Zoom out functionality
Magnifying functionality
Pan functionality
Image overview functionality
I have to develop the application in Asp.net application. I have the following questions
What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
Have any scope of HTML5 in developing such application?
Can i get any customizable open source project written in javascript or jQuery?
My answers to your questions:
I would use HTML, since you don't need anything from the server.
There is, you can search google for info.
Look at the info below.
I would try the following steps:
Look for examples of the required features.
Strip these examples down and build them up again according to your requirements.
Create a holder for the image. You can load the image from the server with jQuery and AJAX
Implement controls for zooming, panning. Use the implementation you created in step 2
There is alot of information to be found on the internet. Some examples are:
Zooming
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
Panning
http://manos.malihu.gr/jquery-image-panning
Overview
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
Tutorial for pan and zooming with HTML5 canvas
http://my.safaribooksonline.com/book/web-development/html/9781449308032/images-on-the-canvas/zooming_and_panning_an_image
For me,
I would use HTML,
Use HTML5 and CSS3 if you can,
Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.
If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.
There you go, hope I pointed you in the right direction.
It is a hobby project with a friend,
but since I will invest in it (for UI/UX design) I need to be sure about feasability.
I am a programmer myself but I do not consider being experienced with JS and HTML5.
[Description]
I will be doing this kind of project BUT in JS and Html5 not Flash or Silverlight.
Here is the list of questions about feasabilities with JavaScript and HTML5: https://www.greetingbee.com/card-studio.aspx
we drag drop and manipulate images and in the end we want to save the greeting card (the composed surface) as image file...
how to do it without canvas? to printscreen or generate an image of specific area of html composition (DOM)
how to do it with canvas? keeping in mind performance ?
using SVG and/or PNG for keeping quality of shapes of greeting cards againts resizing etc.. any suggestions and tools recommendations
is there a JS script that could be used to make browser support some HTML5 features if it is not supporting some things, like make browser emulate and support :)), I do not like this question myself but who knows ))
I know its abit unusual case but we all might benefit if those answers find solutions and tips.
I share these links which have some sort of solutions:
www.stackoverflow.com/questions/12652769/rendering-html-elements-to-canvas/12660867#12660867
I know about html2Canvas which is said to be not so perfect, and Modernizer script that help to determine html5 features with browser
I don't know how to do it without canvases but with them there is toDataURL method. You can read about it here: http://www.nihilogic.dk/labs/canvas2image/
If You want to save image on server-side you could send data returned by toDataURL() to your server through AJAX or smthing like that.
As for second question about emulation of HTML5 there is a piece of code which enables you to use canvas tag on old IEs http://code.google.com/p/explorercanvas/