@ng-web-apis/canvas
v4.11.1
Published
A library for declarative use of Canvas API with Angular
Downloads
695
Readme
Canvas API for Angular
This is a library for declarative use of Canvas API with Angular.
Install
If you do not have @ng-web-apis/common:
npm i @ng-web-apis/common
Now install the package:
npm i @ng-web-apis/canvas
Usage
Add CanvasModule
to your module declaration and use waCanvas2d
directive on a
canvas
element to declare 2D context scope. Then
use other directives to draw inside canvas
:
<canvas waCanvas2d>
<canvas-path fillStyle="red">
<canvas-rect
[x]="0"
[y]="0"
[width]="100"
[height]="50"
></canvas-rect>
</canvas-path>
</canvas>
Context directive supports the following attributes (see contextAttributes for 2D context):
opaque
—boolean
attribute to setalpha
tofalse
desynchronized
—boolean
attribute to setdesynchronized
totrue
Directives
There are 3 types of directives you can use:
- Method directives
- Properties directives
- Path directives
Method
These are basic directives to draw things on canvas
.
canvas-clip-path
canvas-draw-image
canvas-text
canvas-path
- You can use
path
input to passPath2D
- You can use
Properties
These directives set properties of
CanvasRenderingContext2D
. They must be
applied to a method directive and they change context property before calling the method. They also restore default
value after drawing is performed so it will not interfere with the rest of picture.
clip
- Either pass a reference to
canvas-clip-path
directive or aPath2D
object
- Either pass a reference to
clipFillRule
direction
fillStyle
filter
imageSmoothingEnabled
imageSmoothingQuality
font
globalAlpha
globalCompositeOperation
lineCap
lineDashOffset
lineJoin
lineWidth
lineDash
miterLimit
strokeStyle
textAlign
textBaseline
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
transform
Path
You can use following directives to draw path on Canvas. They must be children of canvas-path
directive:
canvas-arc
canvas-arc-to
canvas-bezier-curve-to
canvas-ellipse
canvas-line-to
canvas-move-to
canvas-quadratic-curve-to
canvas-rect
Example
Combining properties, method and path directives can be examined on the following case. Consider drawing two rectangles with native commands:
function drawTwoRectangles(context) {
context.beginPath();
context.fillStyle = 'red';
context.rect(0, 0, 100, 50);
context.fill();
context.beginPath();
context.fillStyle = 'green';
context.globalCompositeOperation = 'screen';
context.rect(25, 25, 100, 50);
context.fill();
context.fillStyle = '#000';
context.globalCompositeOperation = 'source-over';
}
This is equivalent to the following HTML
<canvas waCanvas2d>
<canvas-path fillStyle="red">
<canvas-rect
[x]="0"
[y]="0"
[width]="100"
[height]="50"
></canvas-rect>
</canvas-path>
<canvas-path
fillStyle="green"
globalCompositeOperation="screen"
>
<canvas-rect
[x]="25"
[y]="25"
[width]="100"
[height]="50"
></canvas-rect>
</canvas-path>
</canvas>
And both will give you this result:
Pipes
You can use Pipes to create some of the classes, required for particular Canvas operations:
gradient
to create CanvasGradientpath
to create Path2Dpattern
to create CanvasPatternrad
to convert degrees into radianstransform
to convert CSS transform string into DOMMatrix
Notes
- Performance-wise it would of course be slower than performing imperative commands and optimizing them manually. But unless you are making a video game with heavy render cycle this shouldn't be noticeable.
- Unlike raw canvas, default stroke color is transparent to align behavior with SVG.
See also
Other Web APIs for Angular by @ng-web-apis