Skip to content

Commit bfd78b5

Browse files
committedAug 18, 2023
Expose canvas element
1 parent 04a12e5 commit bfd78b5

File tree

2 files changed

+25
-22
lines changed

2 files changed

+25
-22
lines changed
 

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "scratchcard-js",
3-
"version": "1.5.2",
3+
"version": "1.5.3",
44
"description": "Create scratch card in browser.",
55
"main": "./build/scratchcard.min.js",
66
"scripts": {

‎src/ScratchCard.ts

+24-21
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ import { SC_CONFIG, SCRATCH_TYPE } from './ScratchCardConfig';
33
import { dispatchCustomEvent, getOffset, injectHTML, loadImage, throttle } from './utils'
44

55
class ScratchCard {
6+
get canvas(): HTMLCanvasElement {
7+
return this._canvas;
8+
}
69
readonly config: SC_CONFIG;
710
readonly scratchType: SCRATCH_TYPE;
811
readonly ctx: CanvasRenderingContext2D;
912
readonly container: HTMLElement;
1013
private position: number[];
11-
private canvas: HTMLCanvasElement;
14+
private _canvas: HTMLCanvasElement;
1215
private readyToClear: Boolean;
1316
private brush: Brush;
1417
private callbackDone: Boolean;
@@ -52,7 +55,7 @@ class ScratchCard {
5255
// Create and add the canvas
5356
this.generateCanvas();
5457

55-
this.ctx = this.canvas.getContext('2d');
58+
this.ctx = this._canvas.getContext('2d');
5659

5760
// Init the brush instance
5861
this.brush = new Brush(this.ctx, this.position[0], this.position[1]);
@@ -79,7 +82,7 @@ class ScratchCard {
7982
}, 16);
8083

8184
/*---- Events -----------------------------------------------------------------------*/
82-
this.canvas.addEventListener('mousedown', function (event) {
85+
this._canvas.addEventListener('mousedown', function (event) {
8386
event.preventDefault();
8487
self._setScratchPosition();
8588

@@ -89,17 +92,17 @@ class ScratchCard {
8992
self.brush.startLine(self.config.clearZoneRadius);
9093
}
9194

92-
self.canvas.addEventListener('mousemove', scratching);
95+
self._canvas.addEventListener('mousemove', scratching);
9396

9497
document.body.addEventListener('mouseup', function _func (e) {
95-
self.canvas.removeEventListener('mousemove', scratching);
98+
self._canvas.removeEventListener('mousemove', scratching);
9699
self.finish(); // clear and callback
97100
this.removeEventListener('mouseup', _func);
98101
});
99102
});
100103

101104
// Mobile events
102-
this.canvas.addEventListener('touchstart', function (event) {
105+
this._canvas.addEventListener('touchstart', function (event) {
103106
event.preventDefault();
104107
self._setScratchPosition();
105108

@@ -109,9 +112,9 @@ class ScratchCard {
109112
self.brush.startLine(self.config.clearZoneRadius);
110113
}
111114

112-
self.canvas.addEventListener('touchmove', scratching);
115+
self._canvas.addEventListener('touchmove', scratching);
113116
document.body.addEventListener('touchend', function _func () {
114-
self.canvas.removeEventListener('touchmove', scratching);
117+
self._canvas.removeEventListener('touchmove', scratching);
115118
self.finish(); // clear and callback
116119
this.removeEventListener('touchend', _func);
117120
});
@@ -151,14 +154,14 @@ class ScratchCard {
151154
* @private
152155
*/
153156
private _setScratchPosition () {
154-
this.zone = getOffset(this.canvas);
157+
this.zone = getOffset(this._canvas);
155158
}
156159

157160
finish () {
158161
// Exec the callback once
159162
if (!this.callbackDone && this.percent > this.config.percentToFinish) {
160163
this.clear();
161-
this.canvas.style.pointerEvents = 'none';
164+
this._canvas.style.pointerEvents = 'none';
162165
if (this.config.callback !== undefined) {
163166
this.callbackDone = true;
164167
this.config.callback();
@@ -172,14 +175,14 @@ class ScratchCard {
172175
* @param {string} type
173176
*/
174177
dispatchEvent (phase: string, type: string) {
175-
dispatchCustomEvent(this.canvas, `${phase}.${type}`, {});
178+
dispatchCustomEvent(this._canvas, `${phase}.${type}`, {});
176179
}
177180

178181
init (): Promise<any> {
179182
return new Promise((resolve: any, reject: any) => {
180183
loadImage(this.config.imageForwardSrc).then((img: HTMLImageElement) => {
181184
this.scratchImage = img;
182-
this.ctx.drawImage(this.scratchImage, 0, 0, this.canvas.width, this.canvas.height);
185+
this.ctx.drawImage(this.scratchImage, 0, 0, this._canvas.width, this._canvas.height);
183186
this.setBackground();
184187
// Resolve the promise init
185188
resolve();
@@ -192,13 +195,13 @@ class ScratchCard {
192195
}
193196

194197
private generateCanvas (): void {
195-
this.canvas = document.createElement('canvas');
196-
this.canvas.classList.add('sc__canvas');
198+
this._canvas = document.createElement('canvas');
199+
this._canvas.classList.add('sc__canvas');
197200

198201
// Add canvas into container
199-
this.canvas.width = this.config.containerWidth;
200-
this.canvas.height = this.config.containerHeight;
201-
this.container.appendChild(this.canvas);
202+
this._canvas.width = this.config.containerWidth;
203+
this._canvas.height = this.config.containerHeight;
204+
this.container.appendChild(this._canvas);
202205
}
203206

204207
private setBackground (): void {
@@ -208,7 +211,7 @@ class ScratchCard {
208211
let image = document.createElement('img');
209212
loadImage(this.config.imageBackgroundSrc).then((img: HTMLImageElement) => {
210213
image.src = img.src;
211-
this.container.insertBefore(image, this.canvas);
214+
this.container.insertBefore(image, this._canvas);
212215
}, (error: Error) => {
213216
// Stop all script here
214217
console.log(error.message);
@@ -270,7 +273,7 @@ class ScratchCard {
270273
* */
271274
updatePercent (): number {
272275
let counter = 0; // number of pixels cleared
273-
let imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
276+
let imageData = this.ctx.getImageData(0, 0, this._canvas.width, this._canvas.height);
274277
let imageDataLength = imageData.data.length;
275278

276279
// loop data image drop every 4 items [r, g, b, a, ...]
@@ -281,14 +284,14 @@ class ScratchCard {
281284
}
282285
}
283286

284-
return (counter >= 1) ? (counter / (this.canvas.width * this.canvas.height)) * 100 : 0;
287+
return (counter >= 1) ? (counter / (this._canvas.width * this._canvas.height)) * 100 : 0;
285288
}
286289

287290
/**
288291
* Just clear the canvas
289292
*/
290293
clear (): void {
291-
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
294+
this.ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
292295
}
293296

294297
}

0 commit comments

Comments
 (0)
Failed to load comments.