canvas
canvas copied to clipboard
A library for declarative use of Canvas API with Angular
Canvas API for Angular
Part of
Web APIs 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
if you do not need IE support
- 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
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 CanvasGradient -
path
to create Path2D -
pattern
to create CanvasPattern -
rad
to convert degrees into radians
TODO
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
Open-source
Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.