I'm working on a paint application with canvas, and trying to make some better tools.
now i have one tool that only connects lines while following the mouse movement.
can you think of a good tutorial or a good idea for other tools like spary, or brush?
thanks
You might find the following resources useful:
Create a Drawing App with HTML5 Canvas and JavaScript
Create a Paint Bucket Tool in HTML5 and JavaScript
Overview of JavaScript Application Development - Case CanvasDraw
Presentation - Intro to HTML5 Canvas
Feel free to contact me if you need more specific pointers. I think those above should at least help you to get started. :)
Please have a look at this code project article.
it may be useful to you.
http://www.codeproject.com/Articles/427422/Paint-Brush-Application-Using-HTML5-Canvas
thanks
I don't have a tutorial, but I think you should simply use thicker lines to create a brush tool.
A spray tool could draw random points in a circle with random alpha(that's quite easy to implement), but that might be extremely slow on some browsers. Drawing using pre-generated images would be much better but harder to implement.
Related
I need some help with rendering a NURBS surface in webGL.
Some days ago our professor assigned us to draw with NURBS a flag and to animate it.
We have to use webGL (and cannot trhee.js...).
I have no idea on how to proceed (even though I know the theory about NURBS and tessellation more or less).
Any hint?
Disclaimer: I'm not asking for a solution. It's against the rules and I want to get it myself. I just need to be pointed on the right direction.
Thanks in advance
Just because you can't use three.js doesn't mean you can't look at it to figure out how it works! This example renders NURBS and you can view the source code. (Hint: It uses THREE.NURBSSurface, THREE.NURBSUtils, etc... which is then plugged into a ParametricBufferGeometry)
As for the WebGL part, if you're familiar with OpenGL, it's a lot of the same stuff just cut back a bit on features. You need to make a canvas with a context WebGL, generate all your data on the CPU (definitions of the surface, tessellation, etc), and then pass all the vertex and index data to the GPU rendering it all with a shader.
I would suggest you to start with following two lectures:
Drawing Bézier Curves
Drawing Lines is Hard
and finally, use this WebGL example as starting point for your assignement:
Resolution independent rendering of Bezier curves in WebGL
Good luck and happy coding! If you achieve something good, please let us know!
I am searching a tool like Tiled but allowing to make free shapes (not only rectangles or circles). Shapes with curves and such. Could you help me please?
Thank you.
I would suggest using Inkscape.
Though, if you're looking for a tool very much like Tiled but with support for curves, be sure to add a comment to the spline objects feature request and consider helping to finish this pull request.
paper.js
EaselJS
fabric.js
KineticJS
Hello guys I am new in html5 canvas development and I am lost in choosing canvas frameworks. There are so many of them that I can't find out what to use. So here I am! I want your help to choose which one is better for my needs. There are my needs
1) I want the framework used Vector graphics, I know canvas is not DOM, I realy don't care about it but what I mean is I want to manipulate with objects after its creation, PaperJS has this feature I don't know about others. If advanced mouse events will be available it would be better.
2) I want to use the framework for images, I will load image and animate them with canvas, move, animate some colors...
3) I want the framework to be fast because of my needs (image animation should be smooth)
4) I want the framework to have good community because I know I will need some help.
So what do you think which one is better for me? and please if you can write down from my list which are the strength and weakness for each framework?
HTML5 canvas is still very fresh environment. You can get impression there is a lot of tools already available, they are often quite immature though.
My answer will cover only part of your question because I used only KineticJS and EaselJS.
You can start from reading opinions at this page (mine is the last one at the bottom).
Speaking shortly KineticJS has lower entry barrier. It's simple drawing library and has some support for mouse events too. At the time I was trying to use it it was barely extendable. I found it really hard to customize for my needs.
EaselJS is a bit harder to start with, but it's more advanced too. Now it's part of other libs set known all together as CreateJS. It seems that lot of development going around there.
Both Kinetic and Easel supports mouse event. I don't remember
well the Kinetic, sensing 'onMouseOver' is costy with Easel though.
Also both mentioned libs allows objects manipulation. You can find
here TweenJS also useful as addition.
Again both Kinetic and Easel allows this. Easel also has support for
sprites - 'animated images' well known for web game developers.
I'm not sure about Kinetic as I haven't reached animation part of my
project before I dropped it (the lib, not the project). With Easel
speed is tricky. It has some optimization methods implemented like
for example objects cache or snapToPixel flag. Examples seems to run
really well. However for my project using Easel smoothness still is
an issue despite quite a lot of effort put in optimization. Maybe I
misused the API or there is still place for more optimalization I
haven't noticed.
Both libs are quite young but seems to be actively developed.
Authors are rather responsive. Community still isn't big, but I
guess CreateJS as more complete set of tools for creating games will
grow faster.
If you want to check here is the project I mentioned. It's a web page made with usage of EaselJS + TweenJS. Still needs some minor tweaking though.
I would like to create a 3D navigation wall similar to http://www.dior.com/couture/en_us/The-House-of-Dior/THE-HOUSE-OF-DIOR.
I've seen a similar plugin in http://www.flashloaded.com/flashcomponents/3dwall/.
However, I want to create it from scratch as I need to customize it very much.
Any starting template you know would be helpful.
A template might be helpful, but if you truly need to customize it very much, I would suggest that you learn the ins and outs of a nice 3D code library. If you do find a template, you will probably spend just as much time tweaking it only to find that it doesn't allow for what you want.
There are many existing 3D libraries for ActionScript that could make this a pretty straightforward task. PaperVision3D, Away3D or even the native Stage3D API in the Flash Player could get you going in the right direction.
If you want to customize it and have full control over the content you better learn something from scratch: Alternativa3D, Away3D, Flare3D (quite yeasy), Minko.... Those are the most popular and depends on your needs.
I am looking to get into learning how to use the html5 canvas to do animations as well as other things. I have an excellent knowledge of javascript and programming in general (mostly php but can adapt to anything). However, I have not had the opportunity to do much with graphics in the past. I have created nice smooth animations using javascript/jquery but the canvas object seems to be alot more than just that. The hardest part I am finding as I have been playing with it is that you have no reference to an object on the stage unless you store the reference. For example if I create a div on the page I have that reference to the object. However, with the canvas object if you create something within it, it draws that element on the stage giving you no reference to it. So you have to manually store the details of that object as I understand it and I could be wrong (if I am please correct me).
Anyways the whole point of this post is to see if anyone can point me to some really good articles/help about working with the canvas object. Not just drawing graphics to it cause I have been able to accomplish that very easily. But I would like to articles/help on managing the objects on the canvas. I want to make sure that I am doing this correctly/efficiently for the future of the technology. Also I am willing to purchase a book on working with html5 canvas/graphics/animations but most of them that I have seen go over the whole scope of html5 and leave out alot of the details of actually working with the canvas. So if you know any good books with my requirements please recommend them here.
Any help is appreciated.
There are nice libraries to do very basic to complex graphics using HTML5/WebGL
This may not actually teach you how the animations work. But if you are interested, check Three.js
https://github.com/mrdoob/three.js/
Read article "Creating a Framework For Canvas: Objects and Mouse". Not animation, but you can find there something interestring.
Read source code of any big framework, e.h. three.js, or LibCanvas
Read "HTML5 Canvas - Native Interactivity and Animation for the Web"