Radi. Ai to Canvas Plug-In. Almost any Illustrator artwork can be exported to a HTML5 canvas element. Where canvas lacks support for a specific feature, Ai->Canvas automatically rasterizes the artwork to a bitmap and properly positions the image on the canvas. Bring your artwork to life by adding animations to your Illustrator drawings. Ai->Canvas supports rotation, scaling, fading, and movement along a path. For more advanced users, add triggers that start one animation when another animation completes. The purpose of Ai->Canvas is to accelerate your HTML5 canvas development. The HTML and JavaScript that it exports is meant to be copied into your own application and extended. Canvasplus - A simple javascript library for HTML5 Canvas to make common drawing tasks easier.
What's new? Shapes CanvasPlus adds new native shape functions such as drawCircle(), drawEquilateral(), drawIsosceles(), drawScalene(), drawEllipse(), drawLine() and drawPolygon(), as well as an improved rectangle function drawRect(). These new shape functions eliminate the constant reliance on paths in canvas. One of the key differences with these new shape functions is that the fill of the shape is set as the first parameter. All shapes support 'fill' and 'stroke', and rectangles also support 'clear'. Many of these shapes support a rotation parameter that allows for simple rotation of the shape on its centroid. Images The new drawImageAndRotate() function acts the same way as drawImage(), but adds a new rotation parameter to rotate the image on its center.
Canvas CanvasPlus adds new functions for saving and restoring a frame in the canvas. This is just a highlight of some of the features in CanvasPlus. Issues Rotation parameter of drawEllipse() does not work correctly in Opera. Canvas Bézier Curve Example. Canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d") ctx.lineWidth = 6; ctx.strokeStyle = "#333"; ctx.beginPath(); ctx.moveTo(100, 250); ctx.bezierCurveTo(150, 100, 350, 100, 400, 250); ctx.stroke(); This demonstration shows how bézier curves can be drawn on a canvas element. Drag the line ends or the control points to change the curve. For more information, please refer to:How to Draw Bezier Curves on an HTML5 Canvas See also:How to Draw Quadratic Curves on an HTML5 Canvas The code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com.
This code can be used without any restrictions but please don't expect 24/7 support! iPaint - An online painting program.