Create Canvas with transparent backgroundColor

[halbano]

It is off course more a question than an issue. I would like to give thanks to the author for this wonderful directive concerning on a smooth drawing pattern. I will be working in a project that surely will need to put the hands on some details of this code.

The question by now is: I need to setup a transparent background for the canvas. Is there a way to create this? I have tried configuring the backgroundColor property with transparent but no luck.

Help is really appreciated.

[halbano]

Also I have tried with a rgb color like this: rgba(0,0,0,0.5)

[pwambach]

Hey, thanks for the kind words! :) After looking into the code again I have to say that it is not possible to have a transparent background. The directive always paints a full sized rectangle with the set background color in line 92 & 93 (https://github.com/pwambach/angular-canvas-painter/blob/master/js/pwCanvas.js#L92)

If no backgroundColor is set it defaults to white ('#fff'). I think the solution would be to remove these two lines then the canvas should be transparent independent of the specified background color.

[halbano]

Hi again @pwambach

I finally could get this working. This is the used config actually:

$scope.canvasRigthOptions = {
                  "width": "294", //px
                  "height": "150", //px
                  "backgroundColor": "transparent",
                  "color": "#261106",
                  "lineWidth": 2, //px
                  "undo": false, // boolean or a number of versions to keep in memory
                  "customCanvasId": "rightCanvas" // define a custom value for the id attribute of the canvas element (default: 'pwCanvasMain')
            };

Seems to be that the fillColor accepts 'transparent' as an option. Leaving it here in case it could help someone. Thank you.

[pwambach]

Hey cool, easier than I thought :) Thanks for the info!