Canvas module

Canvas module is for image manipulation purposes.

You can generate image for your styles on fly. It gives you unlimited possibilities to create graphics that matches your theme colors or styles. And it is all inside you *.tea file.

teacss.Canvas is javascript api for image creation and adjustment. It has no dependecies with teacss.core, but is inteded to be used inside tea files.

Under the hood

• teacss.Canvas relies on HTML5 Canvas, so it will work only with Canvas-enabled browsers.
• Library uses both 'webgl' and '2d' contexts with seamless switching between the two.
• Canvas functions work in a different way when teacss.build is used. You can save created or altered images to disk if needed for production use. li As HTML5 canvas and webgl available only in browser you have to fire build event from client side.
• TeaCSS comes bundled with several server backend versions. But it is very easy to write an own one. The only thing needed - is to get data from browser and save it to disk. Already compiled and minified.

Simple example

var canvas = new Canvas('foo.jpg')
    .brightnessContrast(10,20)
    .multiplyColor('red')
    .draw2D(function(ctx,c2d) {
        ctx.strokeWidth = 5;
        ctx.moveTo(0,0);
        ctx.lineTo(c2d.width,c2d.height);
    })
canvas.background('foo_bg.png');

Code is pretty self-explanatory. First, we load 'foo.jpg' adjust brightness and contrast, then colorize it with red and later add some drawings on top.

Then we use it as element background and point that we want to save that image as 'foo_bg.png' if we are in production.

Use colorpickers on the right to generate background image.

You can review the full code behind the link (with teacss.ui code):canvas_demo.tea

And here is all the tea code needed for this sample.

body {
  @{
    // pretty clear here, huh?
    var canvas = new Canvas("src.png");
    canvas.replaceColors( {
        '#ffae00':picker1.value,
        '#f7e7ba':lighten(picker1.value,30),
        '#705551':picker2.value
    });
    // display
    canvas.background('bg.png');
  }
}