Concrete is an ultra fast, lightweight Html5 Canvas framework that enables hit detection, layering, pixel ratio management, exports, and downloads.
As the creator of KineticJS, author of HTML5 Canvas Cookbook, founder of HTML5CanvasTutorials.com, founder of MeteorCharts, and the principal data visualization engineer at Platfora, acquired by Workday, I've identified a handful of features that just about every HTML5 Canvas project needs. Concrete packages up these features into a lightweight framework of about 600 lines of JavaScript, including documentation.
Cool. So why is it called Concrete? Concrete is the foundation for any construction project. It's reliable, and it's long lasting. The letters "Con" in "Concrete" have an uncanny resemblance to "Can" in "Canvas". Plus, it's a great surface for chalk art.
// get array of instantiated viewports
var viewports = Concrete.viewports;
var viewport = new Concrete.Viewport();
// get viewport scene
var scene = viewport.scene;
// add layer to the viewport
viewport.add(layer);
// render the viewport by compositing all layers into a single viewport scene canvas
viewport.render();
viewport.setSize(600, 300);
var key = viewport.getIntersection(20, 30);
var index = viewport.getIndex();
// goodbye forever
viewport.destroy();
var layer = new Concrete.Layer();
// draw a rectangle on the scene canvas
layer.scene.context.fillStyle = 'red';
layer.scene.context.fillRect(0, 0, 100, 50);
// draw a rectangle on the hit canvas for interactivity
layer.hit.context.fillStyle = layer.hit.getColorFromIndex(0);
layer.hit.context.fillRect(0, 0, 100, 50);
// hide layer
layer.visible=false;
viewport.render();
// show layer
layer.visible=true;
viewport.render();
layer.setPosition(50, 50);
layer.setSize(600, 200);
layer.moveUp();
layer.moveDown();
layer.moveToTop();
layer.moveToBottom();
var index = layer.getIndex();
// goodbye forever
layer.destroy();
var scene = new Concrete.Scene();
// get canvas context
var context = scene.context;
// get canvas element
var canvas = scene.canvas;
scene.setSize(600, 200);
scene.clear();
scene.toImage(function(image) {
// do something with the image
});
// download the canvas as an image to your computer. Cool!
scene.download({
fileName: 'my-file.png'
});
var hit = new Concrete.Hit();
// get canvas context
var context = hit.context;
// get canvas element
var canvas = hit.canvas;
hit.setSize(600, 200);
hit.clear();
// get hit color from index. This enables mouse detection when using getIntersection()
var color = hit.getColorFromIndex(0);
var dataIndex = hit.getIntersection(20, 30);