From c2080ab7beec10862ca69be9a146dbb131ad7fd0 Mon Sep 17 00:00:00 2001 From: Konstantin Yakushin Date: Thu, 3 May 2018 14:50:25 +0700 Subject: [PATCH 1/2] Make canvas transparent --- lib/QRCode.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/QRCode.js b/lib/QRCode.js index 7471f47..e6d12ef 100644 --- a/lib/QRCode.js +++ b/lib/QRCode.js @@ -18,7 +18,6 @@ function renderCanvas(canvas) { canvas.height = size; canvas.style.left = (window.innerWidth - size) / 2 + 'px'; if(window.innerHeight > size) canvas.style.top = (window.innerHeight - size) / 2 + 'px'; - ctx.fillRect(0, 0, size, size); var cells = this.cells; var cellWidth = this.size / cells.length; var cellHeight = this.size / cells.length; @@ -104,7 +103,7 @@ var QRCode = createReactClass({ render={renderCanvas} onLoad={this.props.onLoad} onLoadEnd={this.props.onLoadEnd} - style={{height: size, width: size}} + style={{height: size, width: size, backgroundColor: 'transparent' }} /> ); From a0d129411d1e78e5c15adb432659b6d1d18d4b08 Mon Sep 17 00:00:00 2001 From: Konstantin Yakushin Date: Thu, 3 May 2018 16:46:46 +0700 Subject: [PATCH 2/2] Clear rect before drawing --- lib/QRCode.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/QRCode.js b/lib/QRCode.js index e6d12ef..a8ccacf 100644 --- a/lib/QRCode.js +++ b/lib/QRCode.js @@ -29,6 +29,7 @@ function renderCanvas(canvas) { var nTop = rowIndex * cellHeight; ctx.fillStyle = ctx.strokeStyle = column ? bgColor : fgColor; ctx.lineWidth = 1; + ctx.clearRect(nLeft, nTop, cellWidth, cellHeight); ctx.fillRect(nLeft, nTop, cellWidth, cellHeight); ctx.strokeRect( Math.floor(nLeft) + 0.5,