From 2919e79da48ab41e7c51775ead789546fc52c70d Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 12 May 2019 07:16:28 +0200 Subject: [PATCH 1/5] added one test --- test/public/tests.js | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/test/public/tests.js b/test/public/tests.js index 31ee6aaca..aacd0b011 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -2506,3 +2506,41 @@ tests['transformed drawimage'] = function (ctx) { ctx.transform(1.2, 1, 1.8, 1.3, 0, 0) ctx.drawImage(ctx.canvas, 0, 0) } + +tests['clipped image'] = function(ctx, done) { + var globalOffset = 0 + var size = 95 + var x = size + 10 + var y = -size + var img1 = new Image() + img1.onload = function () { + ctx.rotate(1.5708) + ctx.save(); + ctx.beginPath(); + ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0)); + for (side = 0; side < 7; side++) { + ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6)); + } + + ctx.fillStyle = "#ffffff" + ctx.fill(); + ctx.clip(); + ctx.rotate(-1.5708) + ctx.drawImage(img1, 0, x - size, size * 2, size * 2, 0, 0, size * 2 + 25, size * 2 + 15); + ctx.restore() + + ctx.globalCompositeOperation = 'xor'; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 10; + ctx.shadowColor = 'rgba(30,30,30,1)'; + ctx.beginPath(); + for (side = 0; side < 7; side++) { + ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6)); + } + ctx.stroke(); + ctx.globalCompositeOperation = 'destination-atop'; + done(); + } + img1.src = imageSrc('clock.png') +} From 358a1938b86b441a3c3bcf512ed870966ff7a3eb Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 12 May 2019 07:22:16 +0200 Subject: [PATCH 2/5] show shadow --- test/public/tests.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/test/public/tests.js b/test/public/tests.js index aacd0b011..4bdb15c9b 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -2523,24 +2523,25 @@ tests['clipped image'] = function(ctx, done) { } ctx.fillStyle = "#ffffff" - ctx.fill(); - ctx.clip(); + ctx.fill() + ctx.clip() + ctx.shadowOffsetX = 0 + ctx.shadowOffsetY = 0 + ctx.shadowBlur = 10 + ctx.shadowColor = 'rgba(30,30,30,1)' ctx.rotate(-1.5708) - ctx.drawImage(img1, 0, x - size, size * 2, size * 2, 0, 0, size * 2 + 25, size * 2 + 15); + ctx.drawImage(img1, 0, x - size, size * 2, size * 2, 0, 0, size * 2 + 25, size * 2 + 15) ctx.restore() - ctx.globalCompositeOperation = 'xor'; - ctx.shadowOffsetX = 0; - ctx.shadowOffsetY = 0; - ctx.shadowBlur = 10; - ctx.shadowColor = 'rgba(30,30,30,1)'; - ctx.beginPath(); + ctx.globalCompositeOperation = 'xor' + + ctx.beginPath() for (side = 0; side < 7; side++) { - ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6)); + ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6)) } - ctx.stroke(); - ctx.globalCompositeOperation = 'destination-atop'; - done(); + ctx.stroke() + ctx.globalCompositeOperation = 'destination-atop' + done() } img1.src = imageSrc('clock.png') } From f92e480d012cd0f51abf3f18288c8469ed58cdc4 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 12 May 2019 07:39:08 +0200 Subject: [PATCH 3/5] added a gradient test too --- test/public/tests.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/test/public/tests.js b/test/public/tests.js index 4bdb15c9b..c22d66394 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -2545,3 +2545,27 @@ tests['clipped image'] = function(ctx, done) { } img1.src = imageSrc('clock.png') } + +tests['gradient with low opacity'] = function(ctx) { + function rotate(x, y, a, ctx) { + ctx.resetTransform(); + var cos = Math.cos(a); + var sin = Math.sin(a); + ctx.transform(cos, sin, -sin, cos, x, y); + } + + var I = 100; + + for (var i = 0; i < I; i++) { + + // shifts coordinates and rotates + rotate(0 + i * 2, 0, 1, ctx); + + var color = ctx.createLinearGradient(0, 0, 200, 200); + ctx.globalAlpha = 0.1; + color.addColorStop(0, 'rgba(244, 0, 0, 0.2)'); + color.addColorStop(1, 'rgba(9, 200, 0, 0.2)'); + ctx.fillStyle = color; + ctx.fillRect(0, 0, 200, 200); + } +} From 973ed20300ffa5069db15398f3d088aeed29c859 Mon Sep 17 00:00:00 2001 From: NightYoshi370 Date: Wed, 5 Jun 2019 19:24:32 -0700 Subject: [PATCH 4/5] Improve gradient test --- test/public/tests.js | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/test/public/tests.js b/test/public/tests.js index c22d66394..781722754 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -2548,24 +2548,21 @@ tests['clipped image'] = function(ctx, done) { tests['gradient with low opacity'] = function(ctx) { function rotate(x, y, a, ctx) { - ctx.resetTransform(); - var cos = Math.cos(a); - var sin = Math.sin(a); - ctx.transform(cos, sin, -sin, cos, x, y); + ctx.resetTransform() + var cos = Math.cos(a) + var sin = Math.sin(a) + ctx.transform(cos, sin, -sin, cos, x, y) } - var I = 100; - - for (var i = 0; i < I; i++) { - + for (let i = 0; i < 100; i++) { // shifts coordinates and rotates - rotate(0 + i * 2, 0, 1, ctx); - - var color = ctx.createLinearGradient(0, 0, 200, 200); - ctx.globalAlpha = 0.1; - color.addColorStop(0, 'rgba(244, 0, 0, 0.2)'); - color.addColorStop(1, 'rgba(9, 200, 0, 0.2)'); - ctx.fillStyle = color; - ctx.fillRect(0, 0, 200, 200); + ctx.rotate(0 + i * 2, 0, 1) + + let color = ctx.createLinearGradient(0, 0, 200, 200) + ctx.globalAlpha = 0.1 + color.addColorStop(0, 'rgba(244, 0, 0, 0.2)') + color.addColorStop(1, 'rgba(9, 200, 0, 0.2)') + ctx.fillStyle = color + ctx.fillRect(0, 0, 200, 200) } } From b9644c08db22539ca9517bfb116aa157ff8d29ef Mon Sep 17 00:00:00 2001 From: NightYoshi370 Date: Thu, 6 Jun 2019 17:33:38 -0700 Subject: [PATCH 5/5] Update tests.js --- test/public/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/public/tests.js b/test/public/tests.js index 781722754..647803c23 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -2556,7 +2556,7 @@ tests['gradient with low opacity'] = function(ctx) { for (let i = 0; i < 100; i++) { // shifts coordinates and rotates - ctx.rotate(0 + i * 2, 0, 1) + rotate(0 + i * 2, 0, 1, ctx) let color = ctx.createLinearGradient(0, 0, 200, 200) ctx.globalAlpha = 0.1