import {Drawer} from 'penvas/src/drawer.js'

public class | source

Drawer

Direct Subclass:

Application, Container

Draw class

Example:

let drawer = new Drawer();
drawer.drawRect(10, 10, 100, 100);
let metrics = drawer.drawText('Hello world', 50, 50);
metrics.width // text width

Constructor Summary

Public Constructor
public	constructor(ctx: CanvasRenderingContext2D)

Member Summary

Public Members
public	ctx: CanvasRenderingContext2D

Method Summary

Public Methods
public	clearLayer() Reset canvas zone
public	debug(models: Array<Model> \| Model) Add models to debug
public	drawCircle(x: number, y: number, radius: number, size: number, color: string, start: number, end: number) Draw a circle
public	drawFillCircle(x: number, y: number, radius: number, color: string, lineSize: number, lineColor: string, start: number, end: number) Draw a fill circle
public	drawFillRect(x: number, y: number, width: number, height: number, color: string, lineSize: number, lineColor: string) Draw a fill rectangle
public	drawImage(source: *, x: number, y: number, width: number, height: number, destinationX: number, destinationY: number, destinationWidth: number, destinationHeight: number) Draw images
public	drawLine(x: number, y: number, destX: number, destY: number, size: number, color: string) Draw a line
public	drawModel(model: Model): Drawer Draw model
public	drawRect(x: number, y: number, width: number, height: number, size: number, color: string) Draw a rectangle
public	drawText(text: string, x: number, y: number, size: string, font: string, color: string, style: string, align: string, baseline: string): Object Draw a text
public	restore(): Drawer Restore last saved context
public	rotateModel(model: Model, deg: float, pivotX: number, pivotY: number): Drawer Rotate model
public	save(): Drawer Save context

Public Constructors

public constructor(ctx: CanvasRenderingContext2D) source

Params:

Name	Type	Attribute	Description
ctx	CanvasRenderingContext2D	optional default: null

Public Members

public ctx: CanvasRenderingContext2D source

Public Methods

public clearLayer() source

Reset canvas zone

public debug(models: Array<Model> | Model) source

Add models to debug

Params:

Name	Type	Attribute	Description
models	Array<Model> \| Model

public drawCircle(x: number, y: number, radius: number, size: number, color: string, start: number, end: number) source

Draw a circle

Params:

Name	Type	Attribute	Description
x	number		x coordinate for circle position
y	number		y coordinate for circle position
radius	number		circle radius
size	number	optional default: 1	line size
color	string	optional default: black	line color
start	number	optional default: 0	angle start
end	number	optional default: 360	angle end

public drawFillCircle(x: number, y: number, radius: number, color: string, lineSize: number, lineColor: string, start: number, end: number) source

Draw a fill circle

Params:

Name	Type	Attribute	Description
x	number		x coordinate for circle position
y	number		y coordinate for circle position
radius	number		circle radius
color	string	optional default: black	circle background color
lineSize	number	optional default: 0	line size
lineColor	string	optional default: black	line color
start	number	optional default: 0	angle start
end	number	optional default: 360	angle end

public drawFillRect(x: number, y: number, width: number, height: number, color: string, lineSize: number, lineColor: string) source

Draw a fill rectangle

Params:

Name	Type	Attribute	Description
x	number		x coordinate for rectangle position
y	number		y coordinate for rectangle position
width	number		rectangle width
height	number		rectangle height
color	string	optional default: black	rectangle background color
lineSize	number	optional default: 0	line size
lineColor	string	optional default: black	line color

public drawImage(source: *, x: number, y: number, width: number, height: number, destinationX: number, destinationY: number, destinationWidth: number, destinationHeight: number) source

Draw images

Params:

Name	Type	Attribute	Description
source	*		image or canvas
x	number		source pos x
y	number		source pos y
width	number	optional default: null	source width
height	number	optional default: null	source height
destinationX	number	optional default: null	destination x
destinationY	number	optional default: null	destination y
destinationWidth	number	optional default: null	destination width
destinationHeight	number	optional default: null	destination height

public drawLine(x: number, y: number, destX: number, destY: number, size: number, color: string) source

Draw a line

Params:

Name	Type	Attribute	Description
x	number		x coordinate for first point of line
y	number		y coordinate for first point of line
destX	number		x coordinate for second point of line
destY	number		y coordinate for second point of line
size	number	optional default: 1	line size
color	string	optional default: black	line color

public drawModel(model: Model): Drawer source

Draw model

Params:

Name	Type	Attribute	Description
model	Model

Return:

Drawer

public drawRect(x: number, y: number, width: number, height: number, size: number, color: string) source

Draw a rectangle

Params:

Name	Type	Attribute	Description
x	number		x coordinate for rectangle position
y	number		y coordinate for rectangle position
width	number		rectangle width
height	number		rectangle height
size	number	optional default: 1	line size
color	string	optional default: black	line color

public drawText(text: string, x: number, y: number, size: string, font: string, color: string, style: string, align: string, baseline: string): Object source

Draw a text

Params:

Name	Type	Attribute	Description
text	string		The text
x	number		x coordinate for text position
y	number		y coordinate for text position
size	string	optional default: 10pt	text size (default: 10pt)
font	string	optional default: Arial	text font familly (default: Arial)
color	string	optional default: black	text color
style	string	optional	text style, italic, blod etc ...
align	string	optional default: left	text align, left, right, center
baseline	string	optional default: alphabetic	text baseline, top, hanging, middle, alphabetic, ideographic, bottom

Return:

Object

public restore(): Drawer source

Restore last saved context

Return:

Drawer

public rotateModel(model: Model, deg: float, pivotX: number, pivotY: number): Drawer source

Rotate model

Params:

Name	Type	Attribute	Description
model	Model
deg	float
pivotX	number	optional default: null
pivotY	number	optional default: null

Return:

Drawer

public save(): Drawer source

Save context

Return:

Drawer