diff --git a/README.md b/README.md
index 234ff85ff..b54bc0487 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
# Scrawl-canvas Library
-Version: `8.3.4 - 6 Jan 2021`
+Version: `8.4.0 - 2 Feb 2021`
Scrawl-canvas website: [scrawl-v8.rikweb.org.uk](https://scrawl-v8.rikweb.org.uk).
@@ -46,7 +46,7 @@ There are three main ways to include Scrawl-canvas in your project:
2. Unzip the file to a folder in your project.
3. Import the library into the script code where you will be using it.
-Alternatively, a zip package of the v8.3.4 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-3-4.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-3-4.zip) - this package only includes the minified file.
+Alternatively, a zip package of the v8.4.0 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-4-0.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-4-0.zip) - this package only includes the minified file.
```html
@@ -95,7 +95,7 @@ Alternatively, a zip package of the v8.3.4 files can be downloaded from this lin
This will pull the requested npm package directly into your web page:
```html
```
diff --git a/demo/canvas-007.html b/demo/canvas-007.html
index 3f7b8a5fc..b73313a8a 100644
--- a/demo/canvas-007.html
+++ b/demo/canvas-007.html
@@ -13,6 +13,9 @@
.controls {
grid-template-columns: 1fr 2fr 1fr 2fr;
}
+ img {
+ display: none;
+ }
@@ -27,13 +30,20 @@ Apply filters at the entity, group and cell level
none
+ ---
+ areaAlpha
blue
blur
brightness
channels
+ channelLevels
channelstep
cyan
chroma
+ chromakey
+ edge detect
+ emboss
+ gray
grayscale
green
invert
@@ -43,16 +53,20 @@ Apply filters at the entity, group and cell level
notblue
notgreen
notred
+ offset
+ offsetChannels
pixelate
red
saturation
sepia
+ sharpen
tint
threshold
yellow
- User-Defined totalRed
- UD totalRed + pixelate
- sepia + UD venetianBlinds
+ ---
+ Drop Shadow
+ Noise
+ Red Borders
@@ -71,7 +85,7 @@ Apply filters at the entity, group and cell level
-
@@ -95,6 +109,8 @@ Notes
Annotated code
+
diff --git a/demo/canvas-007.js b/demo/canvas-007.js
index 0265efa7f..a44e66962 100644
--- a/demo/canvas-007.js
+++ b/demo/canvas-007.js
@@ -8,9 +8,11 @@ import scrawl from '../source/scrawl.js'
// #### Scene setup
let canvas = scrawl.library.artefact.mycanvas;
+scrawl.importDomImage('.map');
+
canvas.set({
fit: 'fill',
- backgroundColor: 'lightgray',
+ backgroundColor: 'beige',
css: {
border: '1px solid black'
}
@@ -105,8 +107,13 @@ let wheel2 = wheel1.clone({
// Define filters - need to test them all, plus some user-defined filters
-// __Grayscale__ filter
+// __Gray__ filter
scrawl.makeFilter({
+ name: 'gray',
+ method: 'gray',
+
+// __Grayscale__ filter
+}).clone({
name: 'grayscale',
method: 'grayscale',
@@ -164,6 +171,25 @@ scrawl.makeFilter({
}).clone({
name: 'yellow',
method: 'yellow',
+
+// __Edge detect__ filter
+}).clone({
+ name: 'edgeDetect',
+ method: 'edgeDetect',
+
+// __Sharpen__ filter
+}).clone({
+ name: 'sharpen',
+ method: 'sharpen',
+});
+
+// __Emboss__ filter
+scrawl.makeFilter({
+ name: 'emboss',
+ method: 'emboss',
+ angle: 225,
+ strength: 10,
+ tolerance: 50,
});
// __Chroma__ (green screen) filter
@@ -230,6 +256,25 @@ scrawl.makeFilter({
blueInBlue: 0.4,
});
+// __Offset__ filter
+scrawl.makeFilter({
+ name: 'offset',
+ method: 'offset',
+ offsetX: 12,
+ offsetY: 12,
+ opacity: 0.5,
+});
+
+// __Offset Channels__ filter
+scrawl.makeFilter({
+ name: 'offsetChannels',
+ method: 'offsetChannels',
+ offsetRedX: -12,
+ offsetGreenY: 12,
+ offsetBlueX: 3,
+ offsetBlueY: -3,
+});
+
// __Pixellate__ filter
scrawl.makeFilter({
name: 'pixelate',
@@ -244,10 +289,21 @@ scrawl.makeFilter({
scrawl.makeFilter({
name: 'blur',
method: 'blur',
- radius: 20,
- shrinkingRadius: true,
- includeAlpha: true,
- passes: 3,
+ radius: 6,
+ passes: 2,
+});
+
+// __AreaAlpha__ filter
+scrawl.makeFilter({
+ name: 'areaAlpha',
+ method: 'areaAlpha',
+ tileWidth: 20,
+ tileHeight: 20,
+ gutterWidth: 20,
+ gutterHeight: 20,
+ offsetX: 8,
+ offsetY: 8,
+ areaAlphaLevels: [255, 0, 0, 255],
});
// __Matrix__ filter
@@ -263,44 +319,111 @@ scrawl.makeFilter({
weights: [-1, -1, -1, -1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
});
-// First user-defined filter
-let myUDF = scrawl.makeFilter({
- name: 'totalRed',
- method: 'userDefined',
-
- userDefined: `
- for (let i = 0, iz = cache.length; i < iz; i++) {
-
- data[cache[i]] = 255;
- }`,
+// __ChannelLevels__ filter
+scrawl.makeFilter({
+ name: 'channelLevels',
+ method: 'channelLevels',
+ red: [50, 200],
+ green: [60, 220, 150],
+ blue: [40, 180],
+ alpha: [],
});
-// Second user-defined filter (cloned)
-myUDF.clone({
- name: 'venetianBlinds',
- level: 9,
-
- userDefined: `
- let i, iz, j, jz,
- level = filter.level || 6,
- halfLevel = level / 2,
- yw, transparent, pos;
-
- for (i = localY, iz = localY + localHeight; i < iz; i++) {
-
- transparent = (i % level > halfLevel) ? true : false;
+scrawl.makeFilter({
+ name: 'chromakey',
+ method: 'chromakey',
+ red: 0,
+ green: 127,
+ blue: 0,
+ opaqueAt: 0.7,
+ transparentAt: 0.5,
+});
- if (transparent) {
+scrawl.makeFilter({
+ name: 'dropShadow',
+ actions: [
+ {
+ action: 'blur',
+ lineIn: 'source-alpha',
+ lineOut: 'shadow',
+ radius: 2,
+ passes: 2,
+ includeRed: false,
+ includeGreen: false,
+ includeBlue: false,
+ includeAlpha: true,
+ },
+ {
+ action: 'compose',
+ lineIn: 'source',
+ lineMix: 'shadow',
+ offsetX: 6,
+ offsetY: 6,
+ }
+ ],
+});
- yw = (i * iWidth) + 3;
-
- for (j = localX, jz = localX + localWidth; j < jz; j ++) {
+scrawl.makeFilter({
+ name: 'redBorder',
+ actions: [
+ {
+ action: 'blur',
+ lineIn: 'source-alpha',
+ lineOut: 'shadow',
+ radius: 3,
+ passes: 2,
+ includeRed: false,
+ includeGreen: false,
+ includeBlue: false,
+ includeAlpha: true,
+ },
+ {
+ action: 'binary',
+ lineIn: 'shadow',
+ lineOut: 'shadow',
+ alpha: 1,
+ },
+ {
+ action: 'flood',
+ lineIn: 'shadow',
+ lineOut: 'red-flood',
+ red: 255,
+ },
+ {
+ action: 'compose',
+ lineIn: 'shadow',
+ lineMix: 'red-flood',
+ lineOut: 'colorized',
+ compose: 'destination-in',
+ },
+ {
+ action: 'compose',
+ lineIn: 'source',
+ lineMix: 'colorized',
+ }
+ ],
+});
- pos = yw + (j * 4);
- data[pos] = 0;
- }
- }
- }`,
+scrawl.makeFilter({
+ name: 'noise',
+ actions: [
+ {
+ action: 'process-image',
+ asset: 'perlin',
+ width: 500,
+ height: 500,
+ copyWidth: 500,
+ copyHeight: 500,
+ lineOut: 'map',
+ },
+ {
+ action: 'displace',
+ lineMix: 'map',
+ scaleX: 20,
+ scaleY: 30,
+ transparentEdges: true,
+ }
+ ],
});
diff --git a/demo/canvas-013.js b/demo/canvas-013.js
index a6454387c..4aede97c6 100644
--- a/demo/canvas-013.js
+++ b/demo/canvas-013.js
@@ -108,26 +108,26 @@ scrawl.makeLine({
}).clone({
name: 'secondLine',
- startY: '22%',
- endY: '19.2%',
+ startY: '16.5%',
+ endY: '13.7%',
}).clone({
name: 'thirdLine',
startX: '20%',
- startY: '18.5%',
+ startY: '14%',
endX: '85%',
- endY: '18.5%',
+ endY: '14%',
});
// ##### makeQuadratic factory function
scrawl.makeQuadratic({
name: 'firstQuad',
startX: '5%',
- startY: '30.5%',
+ startY: '20%',
controlX: '50%',
- controlY: '22%',
+ controlY: '15%',
endX: '95%',
- endY: '30.5%',
+ endY: '20%',
lineWidth: 3,
lineCap: 'round',
strokeStyle: 'darkseagreen',
@@ -138,28 +138,30 @@ scrawl.makeQuadratic({
}).clone({
name: 'secondQuad',
- startX: '7%',
- controlY: '18.5%',
- endX: '93%',
+ startX: '12%',
+ endX: '88%',
+ startY: '21.5%',
+ endY: '21.5%',
}).clone({
name: 'thirdQuad',
- startX: '9%',
- controlY: '15%',
- endX: '91%',
+ startX: '19%',
+ endX: '81%',
+ startY: '23%',
+ endY: '23%',
});
// ##### makeBezier factory function
scrawl.makeBezier({
name: 'firstBezier',
startX: '5%',
- startY: '36%',
+ startY: '27%',
startControlX: '40%',
- startControlY: '31%',
+ startControlY: '22%',
endControlX: '60%',
- endControlY: '41%',
+ endControlY: '32%',
endX: '95%',
- endY: '36%',
+ endY: '27%',
lineWidth: 3,
lineCap: 'round',
strokeStyle: 'linen',
@@ -171,15 +173,15 @@ scrawl.makeBezier({
}).clone({
name: 'secondBezier',
startX: '7%',
- startControlY: '25%',
- endControlY: '47%',
+ startControlY: '18%',
+ endControlY: '36%',
endX: '93%',
}).clone({
name: 'thirdBezier',
startX: '9%',
- startControlY: '19%',
- endControlY: '53%',
+ startControlY: '14%',
+ endControlY: '40%',
endX: '91%',
});
diff --git a/demo/canvas-015.html b/demo/canvas-015.html
index 1e5f896b9..8751b0e20 100644
--- a/demo/canvas-015.html
+++ b/demo/canvas-015.html
@@ -30,6 +30,7 @@ 
+