I'm building an Angular app where I intend to let the user draw text fields over PDF pages. For this, I'm using ng2-pdf-viewer library and I have a PDF page component that will hold a PDF page, as well as its corresponding HTML canvas element.
The problem I'm facing is that the canvas turns black when I start drawing on the respective PDF page. Although I am able to draw successfully, this means the whole page background turns to black.
Here is how it looks (the PDF page with content is behind that black background):
My page component code is the following:
export class PdfPreviewPageComponent {
@Input() pdfSrc: string = '';
@Input() pdfPageNumber!: number;
@ViewChild('pdfViewer', { static: false, read: ElementRef }) pdfViewerRef!: ElementRef;
private canvas!: HTMLCanvasElement;
private cx: CanvasRenderingContext2D | null = null;
private isDrawing: boolean = false;
private startX!: number;
private startY!: number;
// UPDATE: changed from getting the canvas via input and using ngOnChanges to
// using the (page-rendered) event provided by ng2-pdf-viewer library
onPageLoaded(event: Event) {
if (!this.canvas) {
this.canvas = this._document.getElementsByTagName('canvas')[this.pdfPageNumber - 1];
this.ctx = this.canvas.getContext('2d');
if (this.ctx) {
this.ctx.fillStyle = 'red';
this.ctx.lineWidth = 2;
this.handleCanvasEvent();
}
}
}
private handleCanvasEvent() {
this.canvas.addEventListener('mousemove', (event) => this.onMouseMove(event));
this.canvas.addEventListener('mousedown', (event) => this.onMouseDown(event));
this.canvas.addEventListener('mouseup', (event) => this.onMouseUp(event));
}
private onMouseDown(event: MouseEvent) {
this.isDrawing = true;
this.startX = event.clientX - this.canvas.getBoundingClientRect().left;
this.startY = event.clientY - this.canvas.getBoundingClientRect().top;
}
private onMouseMove(event: MouseEvent) {
if (!this.isDrawing) {
return;
}
const currentX = event.clientX - this.canvas.getBoundingClientRect().left;
const currentY = event.clientY - this.canvas.getBoundingClientRect().top;
const width = currentX - this.startX;
const height = currentY - this.startY;
this.clearCanvas();
this.drawRectangle(this.startX, this.startY, width, height);
}
private onMouseUp(event: MouseEvent) {
this.isDrawing = false;
}
private clearCanvas() {
if (this.cx) {
this.cx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
private drawRectangle(x: number, y: number, width: number, height: number) {
if (this.cx) {
this.cx.strokeRect(x, y, width, height);
}
}
...
...
}
How can I avoid the canvas turning completely black? I don't want to hide the content of the PDF page as the whole purpose is for the user to draw text fields (rectangles) where they may see fit.
Here is the stackblitz project.
