background preloader

Dev

Facebook Twitter

HTML5 Game Devs Forum. FlockDraw - Free Online Drawing Tool - Collaborative Group Whiteboard.

Services

Stypi. Paper.js - Paper.js. Paper.js — The Swiss Army Knife of Vector Graphics Scripting. Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development. Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users. Paper.js is developed by Jürg Lehni & Jonathan Puckey, and distributed under the permissive MIT License. Getting Started First of all, take a look at some of our examples.Download Paper.js or check out the latest version from our Github Repository.Want to learn Paper.js?

Overview Browser Support. SVG Graphics Library for JavaScript HTML5 :jsDraw2DX. Orbit. APIs To Use In Your Movie Movie Controls Stop and play a movie movie.play(); movie.stop(); movie.pause(); Control movie timeline movie.goto(2); // Goto frame 2 movie.goto('10s'); // Goto 10 seconds after start Stage Set background color stage.setBackgroundColor('red'); Set Framerate of the movie (frames per second) stage.setFramerate(30); Freeze and unfreeze the movie stage.freeze(); stage.unfreeze(); Draw a Path Create a new shape with a specified path. Shape = new Path(); shape.moveTo(0, 0).lineTo(100, 0); shape.addTo(stage); Use SVG-like paths to create the same shape. Draw a rectangle Overview new Rect(x, y, width, height, cornerRadius) Draw a rectangle, at 0x0 of size 100x100 (still invisible) new Rect(0, 0, 100, 100).addTo(stage); Rectangle, with rounded corners of radius 5px (still invisible) new Rect(0, 0, 100, 100, 5).addTo(stage); Red rectangle with green border, 10px wide (visible) Rectangle with 1px borders of color 0xFFAABB, no fill color Half opaque rectangle of color rgba(100,100,255,0.5) Bitmap.