https://omp.org.pl/js/canvas/liquid-canvas-plugins.js

1(function($) {
2
3  $.registerLiquidCanvasPlugin({
4    name: "rect",
5    paint: function(area) {
6      area.ctx.beginPath();
7      area.ctx.rect(0, 0, area.width, area.height);
8      area.ctx.closePath();
9      if (this.action) this.action.paint(area);  // for chaining
10    }
11  });
12  
13  $.registerLiquidCanvasPlugin({
14    name: "roundedRect",
15    defaultOpts: { radius:20 },
16    paint: function(area) {
17      var ctx = area.ctx;
18      var opts = this.opts;
19      ctx.beginPath();
20      ctx.moveTo(0, opts.radius);
21      ctx.lineTo(0, area.height - opts.radius);
22      ctx.quadraticCurveTo(0, area.height, opts.radius, area.height);
23      ctx.lineTo(area.width - opts.radius, area.height);
24      ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.radius);
25      ctx.lineTo(area.width, opts.radius);
26      ctx.quadraticCurveTo(area.width, 0, area.width - opts.radius, 0);
27      ctx.lineTo(opts.radius, 0);
28      ctx.quadraticCurveTo(0, 0, 0, opts.radius);
29      ctx.closePath();
30      if (this.action) this.action.paint(area);  // for chaining
31    },
32    shrink: function(area, steps) {
33      this.defaultShrink(area, steps);
34      this.opts.radius -= steps;
35    }
36  });
37  
38  // This is a Liquid Canvas Plugin
39  $.registerLiquidCanvasPlugin({
40    name: "fill",
41    defaultOpts: { color:"#aaa" },
42    paint: function(area) {
43      area.ctx.fillStyle = this.opts.color;
44      this.action.paint(area);
45      area.ctx.fill();
46    }
47  });
48
49  $.registerLiquidCanvasPlugin({  // hmmmmmmm, no rotation? no width??? ah patterns!
50    name: "image",
51    defaultOpts: { url:"http://www.ruzee.com/files/liquid-canvas-image.png" },
52    paint: function(area) {
53      var image = new Image();
54      image.src = this.opts.url;
55      image.onload = function() { 
56        area.ctx.drawImage(this, 0, 0); 
57      };
58    }
59  });
60
61  // This is a Liquid Canvas Plugin
62  $.registerLiquidCanvasPlugin({
63    name: "gradient",
64    defaultOpts: { from: "#fff", to:"#666" },
65    paint: function(area) {
66      var grad = area.ctx.createLinearGradient(0, 0, 0, area.height);
67      grad.addColorStop(0, this.opts.from);
68      grad.addColorStop(1, this.opts.to);
69      area.ctx.fillStyle = grad;
70      this.action.paint(area);
71      area.ctx.fill();
72    }
73  });
74  // End of Liquid Canvas Plugin
75  
76  $.registerLiquidCanvasPlugin({
77    name: "shadow",
78    defaultOpts: { width:3, color:'#000', shift:2 },
79    paint: function(area) {
80      var sw = this.opts.width;
81      
82      area.ctx.fillStyle = this.opts.color; 
83      area.ctx.globalAlpha = 1.0 / sw;
84      for (var s = 0; s < sw; ++s) {
85        this.action.paint(area);
86        area.ctx.fill();
87        this.action.shrink(area, 1);
88      }
89      area.ctx.globalAlpha = 1;
90      area.ctx.translate(0, -this.opts.shift);
91    }
92  });
93
94  $.registerLiquidCanvasPlugin({
95    name: "border",
96    defaultOpts: { color:'#8f4', width:3 },
97    paint: function(area) {
98      var bw = this.opts.width;
99      area.ctx.strokeStyle = this.opts.color;
100      area.ctx.lineWidth = bw;
101      this.action.shrink(area, bw / 2);
102      this.action.paint(area);
103      area.ctx.stroke();
104      this.action.shrink(area, bw / 2);
105    }
106  });
107
108})(jQuery);