Instant RaphaelJS Starter [Instant]

This title is available as an eBook only
Instant RaphaelJS Starter [Instant]
eBook: $12.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print & eBook also available on:
Learn in an Instant - Short, Fast, Focused
Table of Contents
Sample Chapters
  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Create cross-browser imageless drawings and animations, with DOM access
  • Create your own shape, almost any shape, with simple and illustrated techniques
  • Write once and run in almost any browsers including IE6

Book Details

Language : English
eBook : 62 pages
Release Date : January 2013
ISBN : 1782169857
ISBN 13 : 9781782169857
Author(s) : A.Krishna sagar
Topics and Technologies : All Books, Big Data and Business Intelligence, Instant, Open Source

Table of Contents

Instant RaphaelJS Starter
  • Instant RaphaelJS Starter
    • So, what is RaphaelJS?
      • Two-headed and three-lettered
      • The marriage of two problems and the birth of RaphaelJS
        • JavaScript – the binder of oddities
      • Browser support
      • What is RaphaelJS and what is not RaphaelJS?
        • A little about vector and raster graphics
        • RaphaelJS as a vector
      • The x, y positioning that RaphaelJS uses
    • Installation
      • Step 1 – What do I need?
      • Step 2 – Downloading RaphaelJS
      • Step 3 – Adding it to the HTML
      • And that's it!
    • Quick start – creating your first shape
      • Step 1 – Creating a canvas to draw on
        • Creating a canvas in the browser's viewport
        • Creating an object in an element (recommended)
      • Step 2 – Drawing the circle
        • The attr() method
    • Top features you need to know about
      • Creating a Raphael element
        • Basic shape
        • Complex shapes
      • Extracting and using paths from an editor
        • Vector graphics editors
        • Creating text
      • Manipulating the style of the element
      • Transforming an element
        • Manipulating a shape
      • Animating a shape
      • Animating transformations
      • Adding events to Raphael elements
        • Click event
        • Mouseover event
      • Methods you'll want to know and use
        • Element methods
        • Paper methods
        • Set methods
    • People and places you should get to know
      • Official sites
      • Articles and tutorials
      • Community
      • Blogs
      • Twitter
    • Summary

A.Krishna sagar

A.Krishna sagar is a professional web developer and designer who has a love for creativity and enjoys experimenting with various frontend web technologies. He is a technical enthusiast specializing in frontend development (JavaScript, jQuery, CSS3, HTML5, Canvas, RaphaelJS, WebGL, and Google Maps JavaScript API), with over 4 years of industrial experience. As a techie, he has a clear logical and analytical thought process for solving problems, and has a deep understanding of what he does. Apart from being good at what he does, he is also an excellent learner who always dives into new web technologies and accepts challenges willingly. As a person, he is an optimistic, fun loving, and out of the box thinker. Though he did his Bachelor's degree in Biotechnology, his enthusiasm for Internet technologies led him to do an NIIT course in Computer Science at the same time, and he later acquired an MSc degree in Computer Science.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

Sorry, there are currently no downloads available for this title.

Frequently bought together

Instant RaphaelJS Starter [Instant] +    Instant Parallel Processing with Gearman [Instant] =
50% Off
the second eBook
Price for both: £14.20

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Create simple geometric shapes
  • Animate the shapes dynamically into anything
  • Create almost any possible shape with a simple technique
  • Add DOM events to any shape created
  • Use Raphael JS in a practical environment
  • Scale the drawing to any size without losing quality
  • Create interactive shapes and drawings

In Detail

Drawing in a browser without images has been around for a long time but it was a complex task with browser support issues. Raphael JS aims to solve all these problems with simple and clear methods to draw cross-browser compatible drawings. Imagine drawing complex dials, graphs, and meters for a dashboard, all without images, and the ability to dynamically manipulate those drawings. Creativity is the only limit with Raphael JS.

"Instant RaphaelJS Starter" is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the real power that is behind Raphael JS, and give you a good grounding in using it in your web pages.

"Instant RaphaelJS Starter" looks at the HTML5 video formats available, and breaks down the mystery and confusion that surrounds which format to use. It will take you through a number of clear, practical recipes that will help you to take advantage of the new HTML5 video standard, quickly and painlessly.

You will also learn how to draw your own shapes using any vector graphics editor, or by using one of the pre-defined shapes. We will also take a look at adding functionality such as DOM events, or animations, as well as how to manipulate the shapes dynamically. If you want to take advantage of imageless vector graphics for browsers using Raphael JS, then this is the book for you.

You will learn everything you need to know to convert shapes and perform animations, as well as how to draw custom shapes with simple techniques using Raphael JS and use them across multiple browsers.


Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features and tasks. Starter Guide

Who this book is for

This book is great for developers new to Vector graphics in browsers (SVG and VML), and who are looking to get a good grounding in how to use Raphael JS to create imageless and fast loading interactive drawings and shapes, in a web browser. It’s assumed that you will have some experience in HTML JavaScript or jQuery already.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software