Able to Draw at Chrome but not able to draw at IE

[bhanu4it]

Hi,
I have created a bootstrap modal window and used ng2-canvas whiteboard. Here I am able to draw at chrome, but I could not able to draw at IE. Could you please help me out how to resolve my issue..

[Peshou]

Can you please give me more information about the issue and what you are trying to do, since i just opened Internet explorer and i could draw on a demo application. I could also draw on edge, firefox, safari, chrome etc..

[bhanu4it]

Hi Peshou,
Thanks for your response.
I am using Angular 2 and for creating the modal using bootstrap modal.
My Task: When I click on Draw Image button modal window has to open and I could able to draw something and then if I click on save button, the drawn image has to display at my html page.

Everything is working fine at Chrome. But in IE after opening modal, I am not able to draw anything after clicking Draw button. ( Here the canvas height and width is becoming zero).

Here I am attaching the code which I have written:

Creation of Button:

Draw Image

================================================================ **Creating Modal Window Code:**

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" (click)="closeClick()" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Draw Image</h4>
        </div>
        <div class="modal-body" style="width:500px;height:300px">
            <canvas-whiteboard #canvasWhiteboard [options]="canvasOptions" [clearButtonClass]="'clearButtonClass'" (onClear)="onCanvasClear()"
                (onUndo)="onCanvasUndo($event)" (onSave)="onCanvasSave($event)">
            </canvas-whiteboard>
        </div>
        <div class="modal-footer">
            <button id='closeModal ' type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

==============================================================
Typescript Code:

import { CanvasWhiteboardComponent, CanvasWhiteboardUpdate } from 'ng2-canvas-whiteboard';

viewProviders: [CanvasWhiteboardComponent],

popupClick() {
this.canvasWhiteboard.clearCanvas();
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 1);
}

isCanvasEmpty(canvas: any): boolean {
var blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL();
}

onCanvasSave(event: any) {
if (!this.isCanvasEmpty(this.canvasWhiteboard.canvas.nativeElement)) {
this.url = event;
this.filesList = this.dataURLtoFile(event, "1.jpg");
$($('#drawImageModal').find('.close')).trigger('click');
}
}

canvasOptions = {
drawButtonEnabled: true,
drawButtonClass: "drawButtonClass",
drawButtonText: "Draw",
clearButtonEnabled: true,
clearButtonClass: "clearButtonClass",
clearButtonText: "Clear",
undoButtonText: "Undo",
undoButtonEnabled: true,
redoButtonText: "Redo",
redoButtonEnabled: true,
colorPickerEnabled: true,
saveDataButtonEnabled: true,
saveDataButtonText: "Done",
lineWidth: 5,
strokeColor: "rgb(0,0,0)",
shouldDownloadDrawing: false,
drawingEnabled: true,
};

[bhanu4it]

Hi
After adding following statements, the canvas height and width setting to 600px and can able to draw.
this.canvasWhiteboard.canvas.nativeElement.width=600;
this.canvasWhiteboard.canvas.nativeElement.height=600;

Now I have the issue with Save Button. When I click on Save button its not calling onCanvasSave(event: any).

[Peshou]

Hi apparently the newest IE and Edge no longer have the methods for creating blobs even though that have msBlob so that they can be differentiated from Chrome or other browsers. This is a bug and needs to be fixed for IE and Edge only.

[Peshou]

Hi sir sorry for the inconvenience, I noticed that internet explorer can use the msToBlob() method for creating the canvas blob so now in version 1.4.8 the download should work

[Peshou]

I will close this issue for now but if there are any issues please feel free to open another one.