Giter VIP home page Giter VIP logo

simplecanvas.js's Introduction

simpleCanvas

An efficient JavaScript library for rendering content using divs, images and css.

This project evolved from the need to be able to render barcharts efficiently in IE8 and below. The current implementation buffers a number if hidden divs inside a container and sets the styles accordingly. The buffer size dynamically grows according to the number of elements that are required, and allows for this to be preset according to likely usage. Elements are reused where possible, and internally no div elements are destroyed. The API allows for a reduction in the buffer size, and thus the destruction of div elements, if explicitly requested. Div borders are used to draw the rectangles to ensure that the resulting image can be printed without changing browser settings to allow background printing.

Examples

See simpleCanvas.html for an example. API docs and further examples will be developed later.

Todo

  • Rectangle rendering capability

  • Text rendering capability

  • Image rendering capability

  • Rotation capability

  • Element position anchoring

  • Line rendering capability (rotated rectangle drawing sugar, see Rotation capability)

  • Single element updating and removal Not implementing this feature, the canvas will behave like a rasterised canvas

  • VML-based fallback hook onbeforeprint/onafterprint for printing rotated objects in IE6/7/8

  • Unit tests

  • API docs

Limitations

  • No complex objects such as arbitrary polygons or circles
  • No stroke styles or other styles, it's simply rectangles, lines and images, but it's fast. Stroke can be constructed manually if required.
  • Text is placed as normal text elements inside a div. This raises concerns about printing because light colours become dark on printing. The simplest solution is to use dark text on light backgrounds to facilitate printing. Could consider writing a bitmap/png font rendering system from images, but it seems unnecessary, or replacing with SVG/VML elements.

Licence

simpleCanvas is licensed under the "Modified BSD" 3-clause licence. Essentially this software is open source and free to use in commercial and non-commercial products. The 3-clause portion of the licence ensures that the copyright notices are retained and that the names of contributors are not used for endorsement purposes without prior written consent. The 3-clause BSD licence is compatible with the GPL.

See LICENCE for more details

simplecanvas.js's People

Contributors

matt-esch avatar

Stargazers

Cat  avatar  avatar  avatar

Watchers

James Cloos avatar  avatar  avatar

simplecanvas.js's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.