This is a library for declarative use of Canvas API with Angular.
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
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
There are 3 types of directives you can use:
- Method directives
- Properties directives
- Path directives
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
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
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
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:
You can use Pipes to create some of the classes, required for particular Canvas operations:
-
gradient
to create CanvasGradient -
path
to create Path2D -
pattern
to create CanvasPattern -
rad
to convert degrees into radians -
transform
to convert CSS transform string into DOMMatrix
- 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.
Other Web APIs for Angular by @ng-web-apis