Home Reference Source 
import {Canvas} from '@digihaus/monogatari/main/model/component/Canvas.js'
public class | source

Canvas

Extends:

model/component/Graphic~Graphic → Canvas

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

canvas: *

public

context: *

public

draw: *

Method Summary

Public Methods
public

circle(x: *, y: *, radius: *)

public

clear(color: *)

public

clearRect(x: *, y: *, width: *, height: *, color: *)

public

clip()

public

clone(): *

public

ellipse(x: *, y: *, width: *, height: *)

public

fill(color: *)

public

line(x1: *, y1: *, x2: *, y2: *)

public

polygon(arrX: *, arrY: *)

public

roundedRect(x: *, y: *, width: *, height: *, radius: number)

public

setAlpha(alpha: *)

public

setColor(color: *)

public

setFill(color: *)

public

setStroke(color: *)

public

stroke(color: *)

Public Constructors

public constructor() source

Public Members

public canvas: * source

public context: * source

public draw: * source

Public Methods

public circle(x: *, y: *, radius: *) source

Params:

NameTypeAttributeDescription
x *
  • optional
y *
  • optional
radius *
  • optional

public clear(color: *) source

Params:

NameTypeAttributeDescription
color *

public clearRect(x: *, y: *, width: *, height: *, color: *) source

Params:

NameTypeAttributeDescription
x *
y *
width *
height *
color *

public clip() source

public clone(): * source

Return:

*

public ellipse(x: *, y: *, width: *, height: *) source

Params:

NameTypeAttributeDescription
x *
y *
width *
height *

Example:

// from http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
// draw by center
strokeEllipse(context, cx - w/2, cy - h/2, w, h);

public fill(color: *) source

Params:

NameTypeAttributeDescription
color *

public line(x1: *, y1: *, x2: *, y2: *) source

Params:

NameTypeAttributeDescription
x1 *
y1 *
x2 *
y2 *

public polygon(arrX: *, arrY: *) source

Params:

NameTypeAttributeDescription
arrX *
arrY *

public roundedRect(x: *, y: *, width: *, height: *, radius: number) source

Params:

NameTypeAttributeDescription
x *
y *
width *
height *
radius number
  • optional
  • default: 5

public setAlpha(alpha: *) source

Params:

NameTypeAttributeDescription
alpha *

public setColor(color: *) source

Params:

NameTypeAttributeDescription
color *

public setFill(color: *) source

Params:

NameTypeAttributeDescription
color *

public setStroke(color: *) source

Params:

NameTypeAttributeDescription
color *

public stroke(color: *) source

Params:

NameTypeAttributeDescription
color *