I am trying to implement a drawing Web UI(Which is like MS Paint) in HTML5. I have started to work with the HTML5 canvas and with some libraries. I have tried to use http://kineticjs.com/ and http://raphaeljs.com/ to do the task. Is there a other good library like that to do the task? Or using canvas to implement this is correct?
check this site, it's from John Resig.
http://processingjs.org/
Related
So I just found Three.js and it looks like a pretty cool JS library. What I'm trying to do is take a 2d image and wrap it around an object in three.js and rotate it like a 3d image. I found a few jquery libraries that offer similar functionality such as SpriteSpin, but most of the discussions and resources I found seem outdated and three.js seems to beat all the jquery plugins performance wise.
So playing around with one of the examples on three.js website I manage to produce this here. As you can see it doesn't look great.
So I'm wondering if it would be possible to flatten out a 3d image into a 2d, like the one below and wrap it around a shape in three.js and then rotate that image.
Since most of the discussion I found on how to achieve similar functionality seemed outdated, I am open to any suggestions on how to do this using more current browser based technologies. Would it be best to use WebGl or canvas, or maybe css3 supports this type of 3d functionality. Do I need to use three.js, or is there a smaller library that supports this functionality? Basically whats the best way to achieve this without having to loop through a bunch of images like some of the jquery libraries do.
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!
Is there any opensource HTML5+CSS3+Javascript based Graphics framework (like www.degrafa.org) available to help one develop an online drawing tool like the one provided by lucidcharts.com?
I basically want to develop a tool where a user can drag-and-drop some already available shapes, resize, rotate, and perform other operations on the figures drawn.
Suggestion for flash based opensource frameworks are welcome too. :)
Dragging and dropping shapes would not be a problem (check out EaseJS). I'm sure you aren't expecting some primitive shapes to be shipped with the library, but are looking to code up the programmatic definitions of primitives, and utilize the drag and drop features of the framework. I hope my assumption is correct. Even if the underlying framework does not provide drag and drop wrappers out of the box, they should not be difficult to code. So here goes:
JS
EaseJS (with a drag and drop demo!)
http://easeljs.com/examples/dragAndDrop.html
RaphaelJS
http://raphaeljs.com/
Processing.js
http://processingjs.org/
Actionscript
X-Graphics Drawing Framework
http://code.google.com/p/xgraphics-drawing-framework/
ASDraw
http://code.google.com/p/asdraw/
Graffiti
http://www.nocircleno.com/graffiti/
Another great framework is d3.js
http://mbostock.github.com/d3/
I need to know how I can draw an image on a canvas element, through JQuery. I really wanted to use JQuery because it's much simpler and I know more about it that pure javascript, although I will use javascript if i have to.
There is no jQuery functionality specific to canvas. There are other libraries that abstract that, though, such as canto, artisanjs, processing.js, easel.js, fabricjs, gury.js.
I usually begin with familiarizing myself with the basics, though, before I use someone else's API. The canvas API is pretty chatty, but it's not difficult to use. Here's a good tutorial on MDN.
http://dev.opera.com/articles/view/html5-canvas-painting/
you might find some useful info here :)
and an example of what it does can be found here:
http://devfiles.myopera.com/articles/649/example5.html
this can be combined with jquery. but mostly is just native javascript I believe
I wanted to build a product customizer similar to http://www.getuncommon.com. But instead of Flash, I will utilize HTML5 canvas and Javascript.
Is there a library which I can use to create and achieve similar editor/product customizer as Uncommon?
I did look at jQuery UI but it is seem more focused on interface than creating my own editor.
Take a look at Fabric.js canvas library.
We're using it in production for design editor on printio.ru
I did something similar to this a while ago.
I used JQuery and Raphael JS. Raphael uses VML in Internet Explorer and SVG and Canvas in other browsers making it a very good cross-browser compatible option.
A good demo of a project using Raphael can be found here.
I used a lot of code from this demo to develop my own tool.
Hope that helps.
I used kineticjs to create an E-Card editor. It was a great experience using the library.