feat: implement filter for Context

Cargo.toml

@@ -10,17 +10,18 @@ version = "0.1.0"
 crate-type = ["cdylib"]
 
 [dependencies]
-anyhow = "1.0"
+anyhow = "1"
 base64 = "0.13"
 cssparser = "0.29"
 napi = {version = "1", features = ["serde-json"]}
 napi-derive = "1"
-once_cell = "1.8"
-regex = "1.5"
+nom = "7"
+once_cell = "1"
+regex = "1"
 serde = "1"
 serde_derive = "1"
 serde_json = "1"
-thiserror = "1.0"
+thiserror = "1"
 
 [target.'cfg(all(target_arch = "x86_64", not(target_env = "musl")))'.dependencies]
 mimalloc-rust = "0.1"

__test__/draw.spec.ts

@@ -933,6 +933,30 @@ test('toDataURLAsync', async (t) => {
   t.deepEqual(pngBuffer, await canvas.encode('png'))
 })
 
+test('shadowOffsetX', async (t) => {
+  const { ctx } = t.context
+  ctx.shadowColor = 'red'
+  ctx.shadowOffsetX = 25
+  ctx.shadowBlur = 10
+
+  // Rectangle
+  ctx.fillStyle = 'blue'
+  ctx.fillRect(20, 20, 150, 100)
+  await snapshotImage(t)
+})
+
+test('shadowOffsetY', async (t) => {
+  const { ctx } = t.context
+  ctx.shadowColor = 'red'
+  ctx.shadowOffsetY = 25
+  ctx.shadowBlur = 10
+
+  // Rectangle
+  ctx.fillStyle = 'blue'
+  ctx.fillRect(20, 20, 150, 80)
+  await snapshotImage(t)
+})
+
 function drawTranslate(ctx: SKRSContext2D) {
   // Moved square
   ctx.translate(110, 30)

__test__/filter.spec.ts

@@ -0,0 +1,119 @@
+import { promises as fs, readFileSync } from 'fs'
+import { join } from 'path'
+
+import ava, { TestInterface } from 'ava'
+
+import { createCanvas, Canvas, SKRSContext2D, Image } from '../index'
+
+import { snapshotImage } from './image-snapshot'
+
+const test = ava as TestInterface<{
+  ctx: SKRSContext2D
+  canvas: Canvas
+}>
+
+const FIREFOX = readFileSync(join(__dirname, 'fixtures', 'firefox-logo.svg'))
+const FIREFOX_IMAGE = new Image()
+FIREFOX_IMAGE.width = 200
+FIREFOX_IMAGE.height = 206.433
+FIREFOX_IMAGE.src = FIREFOX
+
+test.beforeEach((t) => {
+  const canvas = createCanvas(300, 300)
+  t.context.canvas = canvas
+  t.context.ctx = canvas.getContext('2d')
+})
+
+test('filter-blur', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'blur(5px)'
+  ctx.drawImage(FIREFOX_IMAGE, 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-brightness', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'brightness(2)'
+  const image = new Image()
+  image.src = await fs.readFile(join(__dirname, 'fixtures', 'filter-brightness.jpg'))
+  ctx.drawImage(image, 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-contrast', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'contrast(200%)'
+  const image = new Image()
+  image.src = await fs.readFile(join(__dirname, 'fixtures', 'filter-contrast.jpeg'))
+  ctx.drawImage(image, 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-contrast-ff', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'contrast(200%)'
+  ctx.drawImage(FIREFOX_IMAGE, 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-grayscale', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'grayscale(80%)'
+  ctx.drawImage(FIREFOX_IMAGE, 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-hue-rotate', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'hue-rotate(90deg)'
+  ctx.drawImage(FIREFOX_IMAGE, 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-drop-shadow', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'drop-shadow(16px 16px 10px black)'
+  ctx.drawImage(await createImage('filter-drop-shadow.jpeg'), 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-invert', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'invert(100%)'
+  ctx.drawImage(await createImage('filter-invert.jpeg'), 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-opacity', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'opacity(20%)'
+  ctx.drawImage(await createImage('filter-opacity.jpeg'), 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-saturate', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'saturate(200%)'
+  ctx.drawImage(await createImage('filter-saturate.jpeg'), 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-sepia', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'sepia(100%)'
+  ctx.drawImage(await createImage('filter-sepia.jpeg'), 0, 0)
+  await snapshotImage(t)
+})
+
+test('filter-combine-contrast-brightness', async (t) => {
+  const { ctx } = t.context
+  ctx.filter = 'contrast(175%) brightness(103%)'
+  ctx.drawImage(await createImage('filter-combine-contrast-brightness.jpeg'), 0, 0)
+  await snapshotImage(t)
+})
+
+async function createImage(name: string) {
+  const i = new Image()
+  i.src = await fs.readFile(join(__dirname, 'fixtures', name))
+  return i
+}