I develop html5 drawing app based on canvas. So, now I am coding the brush tool. And have several problems, can anybody gives me link/source example how to do it?
From Dev.Opera: Creating an HTML 5 canvas painting application
Please search a bit next time.
Related
I am creating a html5 canvas game. I cannot figure out how to perform the generation of such maps.
All maps of different size and scale. How does it work?
There are plenty of resource about HTML 5 game
Here is one Build a tile-based HTML5 game
Or you wanna to use some Js engine perhaps? http://www.kiwijs.org/api/
Hope this would help you
I have an SVG logo made up predominatly of elements. I want to animate this, or more specifically drop it into a "gravity world". I was hoping to use Box2D (web port).
I'm a noob to Box2D and Canvas really, but I've got as far as converting my SVG into HTML5 canvas using canvg and I'm now reading through the getting started tutorials for Box2dWeb and I can see how to create a world with gravity, but I can't find any examples of walking an existing SVG or Canvas and simply adding the shapes to that world.
It looks like you need to use the Box2D drawing methods. Can anyone point me at a simple example that takes an existing set of shapes (SVG or on Canvas) and simply drops them onto a Box2DWeb gravity world so they simply collapse to the bottom, much like nearly all the existing Box2D demos and tutorials?
Note that with CanVG I'm not adding the shapes to Canvas myself, it is creating the Canvas for me from the SVG.
You can add whatever you want on top of box2d. If you wanted to draw dancing elephants instead of a box shape, that's up to you. Otherwise games would look pretty boring.
Nothing prevents you from using either SVG, canvas, WebGL or even HTML with box2d, you don't need to use the box2d drawing methods if you don't want to.
See this blogpost (and code) for using box2d together with raphaël (SVG). Dmitry Baranovskiy (the author of Raphaël) has also shown some demos of a custom box2d port/wrapper called newton.js. It's not yet released AFAIK, but it promises a simpler and more javascript-like API.
Please check out these links,
1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE
Regarding the html elements to apply box2d effects i also can't find any other links expect the one you mentioned in your answer.
I had been hoping that with a bounty somebody would be able to illustrate for me the "hello world" of 'gravity demos' that could animate some arbitrary shapes. Articles and links I've been shown (and found) so far are much more complicated than I'm looking for.
Whilst I hate to answer my own question, I'd just like to set the bar. This is EXACTLY what I'm looking for;
http://mrdoob.com/projects/chromeexperiments/google-gravity/
This script for this code is licensed under GPL3 I understand and I've tried it out successfully on my site. In fact, it just causes all the DIVs on my page to drop, so it's just the ticket, and I could use it.
It's not however, a simple script. I'd have preferred a simple stand-alone sample if it were possible. Failing that, hopefully this answer will help anyone else looking for something similar.
[Updated]
I've also since found this plugin, although it's a little CPU intensive and crashed Chrome for me.
http://tinybigideas.com/plugins/jquery-gravity/
I'd still be delighted to award the bounty for any better answers.
I'm pretty sure that this is what you want, it uses Gravity Script (the file's so large because it includes jQuery and Box2d.js):
Demo: http://jsfiddle.net/SO_AMK/Cf7jn/
JavaScript: None! It's in it's default configuration.
I don't really know 'Box2d', and I'm not sure if this is what you mean but just to clarify if it comes to where you need it, in HTML5, it works like having the background or style to a <table>, Which if you don't know is just about the same thing as a table in MS Word.
Sample Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
More Color & Style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
And If Allowed in 'Box2d' add some javascript:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Well, Dmitry's newton.js is not yet public. But like #cirrus, I needed something similar. So I've gone ahead and created my own newton.js. It is not well tested, but has API similar to what I can see in Dmitry's video + my own requirement (I wanted to create a game engine on top of Raphael as a renderer)
Please fork at - https://github.com/dbose/newton.js
#cirrus, it also has a simple test.html, which takes a simple Raphael element and add it to the Box2D "world"
Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)
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.
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"
I am trying to generate some sun 'rays' which I can best describe as looking like the blade of a krisknife, such as the blade portion of this picture.
This is just an example. I only need a triangular shape with two or three waves that I can close and fill.
Better yet, is there some HTML5 app with which I can draw a complex figure and then export the javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Something similar to HTML5 Bezier Sketcher but which saves the javascript. Trying to draw complex figures blind is very difficult and I don't want to switch to SVG if it is not necessary.
Thanks 1,000,000
Edit: I have now also looked at all the options at this site. None will allow me to draw and fill simple curves and then see/save canvs commands. All that show commands show them in new libraries like fabric or jsDraw2D.
You can parse SVG into an html5 canvas with fabric.js.
That might do the trick for you.
https://github.com/kangax/fabric.js
Beside SVG it can help you with a nice API to canvas drawing.
I found the answer among the solutions for Convert SVG to Canvas friendly output. The author didn't think it worked for him, but I think it's as perfect as any I have seen.
Professor Cloud (...is frikkin' amazing! This isn't the first thing he's done I have found incredibly useful.) created a site to take SVG input and product Canvas output. You can see it here, at Professor Cloud SVG-to-Canvas.
Using this site, I can draw something or even take a stock vector image in AI, export as SVG, cut out the commands and past them into Prof. Clouds amazing SVG-chipper, and get Canvas code. I understand it doesn't support full SVG capabilities, but then, neither does Canvas. Great for me.
Your solution is probably best but just for the record, I tried experimenting with some graph plotting, and got some nice results:
The equations are:
sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10
You can plot them using: http://www.graphsketch.com/
It looks good with 0 < x < 25