Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
1/**
2 * CanvasRenderer
3 */
4
5( function( root, factory ) {
6 // module definition
7 if ( typeof module == 'object' && module.exports ) {
8 // CommonJS
9 module.exports = factory();
10 } else {
11 // browser global
12 root.Zdog.CanvasRenderer = factory();
13 }
14}( this, function factory() {
15
16var CanvasRenderer = { isCanvas: true };
17
18CanvasRenderer.begin = function( ctx ) {
19 ctx.beginPath();
20};
21
22CanvasRenderer.move = function( ctx, elem, point ) {
23 ctx.moveTo( point.x, point.y );
24};
25
26CanvasRenderer.line = function( ctx, elem, point ) {
27 ctx.lineTo( point.x, point.y );
28};
29
30CanvasRenderer.bezier = function( ctx, elem, cp0, cp1, end ) {
31 ctx.bezierCurveTo( cp0.x, cp0.y, cp1.x, cp1.y, end.x, end.y );
32};
33
34CanvasRenderer.closePath = function( ctx ) {
35 ctx.closePath();
36};
37
38CanvasRenderer.setPath = function() {};
39
40CanvasRenderer.renderPath = function( ctx, elem, pathCommands, isClosed ) {
41 this.begin( ctx, elem );
42 pathCommands.forEach( function( command ) {
43 command.render( ctx, elem, CanvasRenderer );
44 } );
45 if ( isClosed ) {
46 this.closePath( ctx, elem );
47 }
48};
49
50CanvasRenderer.stroke = function( ctx, elem, isStroke, color, lineWidth ) {
51 if ( !isStroke ) {
52 return;
53 }
54 ctx.lineWidth = lineWidth;
55 if (color && color.getCanvasFill) {
56 ctx.save();
57 ctx.strokeStyle = color.getCanvasFill(ctx);
58 ctx.stroke();
59 ctx.restore();
60 } else {
61 ctx.strokeStyle = color;
62 ctx.stroke();
63 }
64};
65
66CanvasRenderer.fill = function( ctx, elem, isFill, color ) {
67 if ( !isFill ) {
68 return;
69 }
70 if (color && color.getCanvasFill) {
71 ctx.save();
72 ctx.fillStyle = color.getCanvasFill(ctx);
73 ctx.fill();
74 ctx.restore();
75 } else {
76 ctx.fillStyle = color;
77 ctx.fill();
78 }
79};
80
81CanvasRenderer.end = function() {};
82
83return CanvasRenderer;
84
85} ) );