compass-canvas

compass-canvas

Canvas drawing support for Compass with Cairo backend(s)

Description

Canvas is a Compass plugin that provides a drawing surface similar to the <canvas> element in JavaScript and Turtle graphics in other programming languages. It uses Cairo as a back-end to perform all graphics operations. Canvas supports anti-aliasing, vector graphics, gradients, masks, clipping, complex operations like drop shadow and many more.

Installation

Installation is done through RubyGems:

gem install compass-canvas

Dependencies

The compass-canvas gem depends on the cairo gem. In order to install both gems, you must have Cairo's development files present on your system. You can usually install these using your OS package manager.

Ubuntu

sudo apt-get install libcairo2-dev

Example

@import 'canvas';

$shape: triangle(10, 10, 310, 10, 160, 190);

html {
  background: canvas(320, 200,
    $shape
    brush(10, 10, 160, 100, rgba(red, 0.5) 50%, rgba(red, 0.75))
    fill
    reset
    save
      translate(40, 20)
      scale(0.75, 0.75)
      $shape
      brush(black)
      stroke
      brush(10, 10, 160, 100, rgba(blue, 0.75) 50%, rgba(blue, 0.5))
      fill
    restore
  ) no-repeat 50% 50%;
}

License

Canvas is licensed under the MIT License.

Documentation

RDoc is available for the entire project.

For more information on Cairo, visit The Cairo graphics tutorial.

For a complete reference on Cairo methods, visit Pycairo documentation.

Similar Projects

compass-magick is a pure Ruby dynamic image generation for Compass using ChunkyPNG/PhantomJS (no dependency on RMagick despite the name). If you are looking for a project to generate image gradients or small & simple buttons, go check it out.

Copyright

Copyright (c) 2011 Stan Angeloff. See LICENSE.md for details.