Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@ng-web-apis/canvas
Advanced tools
Readme
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 set alpha
to false
desynchronized
— boolean
attribute to set desynchronized
to true
There are 3 types of directives you can use:
These are basic directives to draw things on canvas
.
canvas-clip-path
canvas-draw-image
canvas-text
canvas-path
path
input to pass Path2D
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
canvas-clip-path
directive or a
Path2D
objectclipFillRule
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 CanvasGradientpath
to create Path2Dpattern
to create CanvasPatternrad
to convert degrees into radianstransform
to convert CSS transform string into
DOMMatrixOther Web APIs for Angular by @ng-web-apis
FAQs
A library for declarative use of Canvas API with Angular
The npm package @ng-web-apis/canvas receives a total of 10 weekly downloads. As such, @ng-web-apis/canvas popularity was classified as not popular.
We found that @ng-web-apis/canvas demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.