Interface CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects.

MDN Reference

interface CanvasRenderingContext2D {
    canvas: HTMLCanvasElement;
    direction: CanvasDirection;
    fillStyle: string | CanvasGradient | CanvasPattern;
    filter: string;
    font: string;
    fontKerning: CanvasFontKerning;
    fontStretch: CanvasFontStretch;
    fontVariantCaps: CanvasFontVariantCaps;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    imageSmoothingEnabled: boolean;
    imageSmoothingQuality: ImageSmoothingQuality;
    letterSpacing: string;
    lineCap: CanvasLineCap;
    lineDashOffset: number;
    lineJoin: CanvasLineJoin;
    lineWidth: number;
    miterLimit: number;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    strokeStyle: string | CanvasGradient | CanvasPattern;
    textAlign: CanvasTextAlign;
    textBaseline: CanvasTextBaseline;
    textRendering: CanvasTextRendering;
    wordSpacing: string;
    arc(x, y, radius, startAngle, endAngle, counterclockwise?): void;
    arcTo(x1, y1, x2, y2, radius): void;
    beginPath(): void;
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void;
    clearRect(x, y, w, h): void;
    clip(fillRule?): void;
    clip(path, fillRule?): void;
    closePath(): void;
    color_to_str(color_object, set_global_alpha?): string;
    createConicGradient(startAngle, x, y): CanvasGradient;
    createImageData(sw, sh, settings?): ImageData;
    createImageData(imagedata): ImageData;
    createLinearGradient(x0, y0, x1, y1): CanvasGradient;
    createPattern(image, repetition): null | CanvasPattern;
    createRadialGradient(x0, y0, r0, x1, y1, r1): CanvasGradient;
    drawFocusIfNeeded(element): void;
    drawFocusIfNeeded(path, element): void;
    drawImage(image, dx, dy): void;
    drawImage(image, dx, dy, dw, dh): void;
    drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void;
    draw_box(x1, y1, x2, y2, color, fill?, thickness?, angle?): void;
    draw_circle(x, y, radius, color, fill?, thickness?, start_angle?, end_angle?, counterclockwise?): void;
    draw_image(img, x, y, width?, height?, sx?, sy?, s_width?, s_height?): void;
    draw_image_anchor(img, x, y, width?, height?, anchor_x?, anchor_y?): void;
    draw_line(x1, y1, x2, y2, color, thickness?): void;
    draw_progress_bar(x1, y1, x2, y2, now, max, color1, color2, thickness?): void;
    draw_rota_image(img, x, y, angle?, scale?): void;
    draw_rota_image_3d(img, x, y, angle_x?, angle_y?, angle_z?, scale?): void;
    draw_seamless_image(img, screen_x, screen_y, image_x, image_y, add_x, add_y, x?, y?): number;
    draw_split9_image(split9_images, ul_pos, br_pos, boarder_scale?): void;
    draw_text(str, x, y, color, outline_thickness?, outline_color?, font?): void;
    draw_text_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?): void;
    draw_text_center(str, x, y, color, outline_thickness?, outline_color?, font?): void;
    draw_text_color_tag(str, x, y, default_color, outline_thickness?, outline_color?, font?): void;
    draw_text_color_tag_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?): void;
    draw_text_new_line(str, x, y, color, outline_thickness?, outline_color?, font?, pad_y?): void;
    draw_text_new_line_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?, pad_y?): void;
    draw_text_new_line_color_tag(str, x, y, color, outline_thickness?, outline_color?, font?, pad_y?): void;
    draw_text_new_line_color_tag_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?, pad_y?): void;
    draw_text_right(str, x, y, color, outline_thickness?, outline_color?, font?): void;
    draw_triangle(x, y, base_length, height, color, fill?, thickness?, angle?): void;
    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void;
    fill(fillRule?): void;
    fill(path, fillRule?): void;
    fillRect(x, y, w, h): void;
    fillText(text, x, y, maxWidth?): void;
    font_to_str(font_object): string;
    getContextAttributes(): CanvasRenderingContext2DSettings;
    getImageData(sx, sy, sw, sh, settings?): ImageData;
    getLineDash(): number[];
    getTransform(): DOMMatrix;
    get_height_str(str, font?): number;
    get_height_str_new_line(str, font?, pad_y?): number;
    get_width_str(str, font?): number;
    get_width_str_new_line(str, font?): number;
    isPointInPath(x, y, fillRule?): boolean;
    isPointInPath(path, x, y, fillRule?): boolean;
    isPointInStroke(x, y): boolean;
    isPointInStroke(path, x, y): boolean;
    lineTo(x, y): void;
    measureText(text): TextMetrics;
    moveTo(x, y): void;
    putImageData(imagedata, dx, dy): void;
    putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight): void;
    quadraticCurveTo(cpx, cpy, x, y): void;
    rect(x, y, w, h): void;
    reset(): void;
    resetTransform(): void;
    restore(): void;
    rotate(angle): void;
    roundRect(x, y, w, h, radii?): void;
    roundRect(x, y, w, h, radii?): void;
    save(): void;
    scale(x, y): void;
    setLineDash(segments): void;
    setLineDash(segments): void;
    setTransform(a, b, c, d, e, f): void;
    setTransform(transform?): void;
    stroke(): void;
    stroke(path): void;
    strokeRect(x, y, w, h): void;
    strokeText(text, x, y, maxWidth?): void;
    transform(a, b, c, d, e, f): void;
    translate(x, y): void;
}

Hierarchy

  • CanvasCompositing
  • CanvasDrawImage
  • CanvasDrawPath
  • CanvasFillStrokeStyles
  • CanvasFilters
  • CanvasImageData
  • CanvasImageSmoothing
  • CanvasPath
  • CanvasPathDrawingStyles
  • CanvasRect
  • CanvasShadowStyles
  • CanvasState
  • CanvasText
  • CanvasTextDrawingStyles
  • CanvasTransform
  • CanvasUserInterface
    • CanvasRenderingContext2D

Properties

canvas direction fillStyle filter font fontKerning fontStretch fontVariantCaps globalAlpha globalCompositeOperation imageSmoothingEnabled imageSmoothingQuality letterSpacing lineCap lineDashOffset lineJoin lineWidth miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle textAlign textBaseline textRendering wordSpacing

Methods

arc arcTo beginPath bezierCurveTo clearRect clip closePath color_to_str createConicGradient createImageData createLinearGradient createPattern createRadialGradient drawFocusIfNeeded drawImage draw_box draw_circle draw_image draw_image_anchor draw_line draw_progress_bar draw_rota_image draw_rota_image_3d draw_seamless_image draw_split9_image draw_text draw_text_anchor draw_text_center draw_text_color_tag draw_text_color_tag_anchor draw_text_new_line draw_text_new_line_anchor draw_text_new_line_color_tag draw_text_new_line_color_tag_anchor draw_text_right draw_triangle ellipse fill fillRect fillText font_to_str getContextAttributes getImageData getLineDash getTransform get_height_str get_height_str_new_line get_width_str get_width_str_new_line isPointInPath isPointInStroke lineTo measureText moveTo putImageData quadraticCurveTo rect reset resetTransform restore rotate roundRect save scale setLineDash setTransform stroke strokeRect strokeText transform translate

Properties

Readonly canvas

canvas: HTMLCanvasElement

MDN Reference

direction

direction: CanvasDirection

MDN Reference

fillStyle

fillStyle: string | CanvasGradient | CanvasPattern

MDN Reference

filter

filter: string

MDN Reference

font

font: string

MDN Reference

fontKerning

fontKerning: CanvasFontKerning

MDN Reference

fontStretch

fontStretch: CanvasFontStretch

MDN Reference

fontVariantCaps

fontVariantCaps: CanvasFontVariantCaps

MDN Reference

globalAlpha

globalAlpha: number

MDN Reference

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

MDN Reference

imageSmoothingEnabled

imageSmoothingEnabled: boolean

MDN Reference

imageSmoothingQuality

imageSmoothingQuality: ImageSmoothingQuality

MDN Reference

letterSpacing

letterSpacing: string

MDN Reference

lineCap

lineCap: CanvasLineCap

MDN Reference

lineDashOffset

lineDashOffset: number

MDN Reference

lineJoin

lineJoin: CanvasLineJoin

MDN Reference

lineWidth

lineWidth: number

MDN Reference

miterLimit

miterLimit: number

MDN Reference

shadowBlur

shadowBlur: number

MDN Reference

shadowColor

shadowColor: string

MDN Reference

shadowOffsetX

shadowOffsetX: number

MDN Reference

shadowOffsetY

shadowOffsetY: number

MDN Reference

strokeStyle

strokeStyle: string | CanvasGradient | CanvasPattern

MDN Reference

textAlign

textAlign: CanvasTextAlign

MDN Reference

textBaseline

textBaseline: CanvasTextBaseline

MDN Reference

textRendering

textRendering: CanvasTextRendering

MDN Reference

wordSpacing

wordSpacing: string

MDN Reference

Methods

arc

  • arc(x, y, radius, startAngle, endAngle, counterclockwise?): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • Optional counterclockwise: boolean

    Returns void

arcTo

  • arcTo(x1, y1, x2, y2, radius): void

  • MDN Reference

    Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number
    • radius: number

    Returns void

beginPath

  • beginPath(): void

  • MDN Reference

    Returns void

bezierCurveTo

  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void

  • MDN Reference

    Parameters

    • cp1x: number
    • cp1y: number
    • cp2x: number
    • cp2y: number
    • x: number
    • y: number

    Returns void

clearRect

  • clearRect(x, y, w, h): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

clip

  • clip(fillRule?): void

  • MDN Reference

    Parameters

    • Optional fillRule: CanvasFillRule

    Returns void

  • clip(path, fillRule?): void

  • Parameters

    • path: Path2D
    • Optional fillRule: CanvasFillRule

    Returns void

closePath

  • closePath(): void

  • MDN Reference

    Returns void

color_to_str

  • color_to_str(color_object, set_global_alpha?): string

  • カラーブジェクトを文字列に変換する

    Parameters

    • color_object: string | Color

      カラーオブジェクトか、カラーを表す文字列

    • Optional set_global_alpha: boolean

      カラーオブジェクトの不透明度を GlobalAlpha に設定するかどうか

    Returns string

    カラーを表す文字列

createConicGradient

  • createConicGradient(startAngle, x, y): CanvasGradient

  • MDN Reference

    Parameters

    • startAngle: number
    • x: number
    • y: number

    Returns CanvasGradient

createImageData

  • createImageData(sw, sh, settings?): ImageData

  • MDN Reference

    Parameters

    • sw: number
    • sh: number
    • Optional settings: ImageDataSettings

    Returns ImageData

  • createImageData(imagedata): ImageData

  • Parameters

    • imagedata: ImageData

    Returns ImageData

createLinearGradient

  • createLinearGradient(x0, y0, x1, y1): CanvasGradient

  • MDN Reference

    Parameters

    • x0: number
    • y0: number
    • x1: number
    • y1: number

    Returns CanvasGradient

createPattern

  • createPattern(image, repetition): null | CanvasPattern

  • MDN Reference

    Parameters

    • image: CanvasImageSource
    • repetition: null | string

    Returns null | CanvasPattern

createRadialGradient

  • createRadialGradient(x0, y0, r0, x1, y1, r1): CanvasGradient

  • MDN Reference

    Parameters

    • x0: number
    • y0: number
    • r0: number
    • x1: number
    • y1: number
    • r1: number

    Returns CanvasGradient

drawFocusIfNeeded

  • drawFocusIfNeeded(element): void

  • MDN Reference

    Parameters

    • element: Element

    Returns void

  • drawFocusIfNeeded(path, element): void

  • Parameters

    • path: Path2D
    • element: Element

    Returns void

drawImage

  • drawImage(image, dx, dy): void

  • MDN Reference

    Parameters

    • image: CanvasImageSource
    • dx: number
    • dy: number

    Returns void

  • drawImage(image, dx, dy, dw, dh): void

  • Parameters

    • image: CanvasImageSource
    • dx: number
    • dy: number
    • dw: number
    • dh: number

    Returns void

  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void

  • Parameters

    • image: CanvasImageSource
    • sx: number
    • sy: number
    • sw: number
    • sh: number
    • dx: number
    • dy: number
    • dw: number
    • dh: number

    Returns void

draw_box

  • draw_box(x1, y1, x2, y2, color, fill?, thickness?, angle?): void

  • 左上と右下の座標を指定して矩形を描画する

    Parameters

    • x1: number

      左上の x 座標

    • y1: number

      左上の y 座標

    • x2: number

      右下の x 座標

    • y2: number

      右下の y 座標

    • color: string | Color

      色

    • Optional fill: boolean

      塗りつぶすかどうか

    • Optional thickness: number

      塗りつぶさない場合は枠線の太さ

    • Optional angle: number

      回転角度

    Returns void

draw_circle

  • draw_circle(x, y, radius, color, fill?, thickness?, start_angle?, end_angle?, counterclockwise?): void

  • 円を描画する

    Parameters

    • x: number

      中心の x 座標

    • y: number

      中心の y 座標

    • radius: number

      半径

    • color: string | Color

      色

    • Optional fill: boolean

      塗りつぶすかどうか

    • Optional thickness: number

      塗りつぶさない場合は枠線の太さ

    • Optional start_angle: number

      描画を開始する角度

    • Optional end_angle: number

      描画を終了する角度

    • Optional counterclockwise: boolean

      反時計回りに描画するかどうか

    Returns void

draw_image

  • draw_image(img, x, y, width?, height?, sx?, sy?, s_width?, s_height?): void

  • 画像を描画する

    Parameters

    • img: HTMLImageElement | HTMLCanvasElement

      描画する画像

    • x: number

      描画する左上の x 座標

    • y: number

      描画する左上の y 座標

    • Optional width: null | number

      描画する画像の横幅 ( 指定しない場合は画像サイズのまま描画する )

    • Optional height: null | number

      描画する画像の高さ ( 指定しない場合は画像サイズのまま描画する )

    • Optional sx: null | number

      画像の一部を表示する場合に指定する、表示する範囲の左上の x 座標

    • Optional sy: null | number

      画像の一部を表示する場合に指定する、表示する範囲の左上の y 座標

    • Optional s_width: null | number

      画像の一部を表示する場合に指定する、表示する範囲の横幅

    • Optional s_height: null | number

      画像の一部を表示する場合に指定する、表示する範囲の高さ

    Returns void

draw_image_anchor

  • draw_image_anchor(img, x, y, width?, height?, anchor_x?, anchor_y?): void

  • 基準となる座標と基準の位置を指定して画像を描画する

    Parameters

    • img: HTMLImageElement | HTMLCanvasElement

      描画する画像

    • x: number

      描画する左上の x 座標

    • y: number

      描画する左上の y 座標

    • Optional width: null | number

      描画する画像の横幅 ( 指定しない場合は画像サイズのまま描画する )

    • Optional height: null | number

      描画する画像の高さ ( 指定しない場合は画像サイズのまま描画する )

    • Optional anchor_x: number

      基準となる x 座標の位置

    • Optional anchor_y: number

      基準となる y 座標の位置

    Returns void

draw_line

  • draw_line(x1, y1, x2, y2, color, thickness?): void

  • 線を描画する

    Parameters

    • x1: number

      描画開始位置の x 座標

    • y1: number

      描画開始位置の y 座標

    • x2: number

      描画終了位置の x 座標

    • y2: number

      描画終了位置の y 座標

    • color: string | Color

      色

    • Optional thickness: number

      線の太さ

    Returns void

draw_progress_bar

  • draw_progress_bar(x1, y1, x2, y2, now, max, color1, color2, thickness?): void

  • プログレスバーを描画する

    Parameters

    • x1: number

      左上の x 座標

    • y1: number

      左上の y 座標

    • x2: number

      右下の x 座標

    • y2: number

      右下の y 座標

    • now: number

      プログレスバーで表示する現在の値

    • max: number

      プログレスバーの最大値

    • color1: string | Color

      プログレスバーの枠と背景の色

    • color2: string | Color

      プログレスバーの色

    • Optional thickness: number

      プログレスバーの枠の太さ

    Returns void

draw_rota_image

  • draw_rota_image(img, x, y, angle?, scale?): void

  • 画像を回転描画する

    Parameters

    • img: HTMLImageElement | HTMLCanvasElement

      描画する画像

    • x: number

      画像を描画する中心の x 座標

    • y: number

      画像を描画する中心の y 座標

    • Optional angle: number

      回転する角度

    • Optional scale: number

      表示する画像の拡大率

    Returns void

draw_rota_image_3d

  • draw_rota_image_3d(img, x, y, angle_x?, angle_y?, angle_z?, scale?): void

  • 画像を疑似的に 3D 描画する

    Parameters

    • img: HTMLImageElement | HTMLCanvasElement

      描画する画像

    • x: number

      画像を描画する中心の x 座標

    • y: number

      画像を描画する中心の y 座標

    • Optional angle_x: number

      画像の回転角度 ( オイラー x 軸 )

    • Optional angle_y: number

      画像の回転角度 ( オイラー y 軸 )

    • Optional angle_z: number

      画像の回転角度 ( オイラー z 軸 )

    • Optional scale: number

      表示する画像の拡大率

    Returns void

draw_seamless_image

  • draw_seamless_image(img, screen_x, screen_y, image_x, image_y, add_x, add_y, x?, y?): number

  • シームレス画像を指定された範囲に描画する

    Parameters

    • img: any

      描画する画像

    • screen_x: number

      描画範囲の横幅

    • screen_y: number

      描画範囲の高さ

    • image_x: number

      画像の横幅

    • image_y: number

      画像の高さ

    • add_x: number

      x 方向のスクロール量

    • add_y: number

      y 方向のスクロール量

    • Optional x: number

      描画開始座標

    • Optional y: number

      描画開始座標

    Returns number

    描画後した画像の枚数

draw_split9_image

  • draw_split9_image(split9_images, ul_pos, br_pos, boarder_scale?): void

  • 各辺と中央で 9 つに分割された画像を結合して一つの画像として描画する

    Parameters

    • split9_images: split9_images_t

      各辺と中央で分割された 9 つの画像

    • ul_pos: Vector2

      結合された画像の左上の座標

    • br_pos: Vector2

      結合された画像の右下の座標

    • Optional boarder_scale: number

      中央以外の 8 画像を描画する拡大率

    Returns void

draw_text

  • draw_text(str, x, y, color, outline_thickness?, outline_color?, font?): void

  • 左下の座標を指定して文字列を描画する

    Parameters

    • str: string

      描画する文字列

    • x: number

      左下の x 座標

    • y: number

      左下の y 座標

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    Returns void

draw_text_anchor

  • draw_text_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?): void

  • 基準となる座標と基準の位置を指定して文字列を描画する

    Parameters

    • str: string

      描画する文字列

    • x: number

      基準となる x 座標

    • y: number

      基準となる y 座標

    • anchor_x: number

      基準となる x 座標の位置

    • anchor_y: number

      基準となる y 座標の位置

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    Returns void

draw_text_center

  • draw_text_center(str, x, y, color, outline_thickness?, outline_color?, font?): void

  • x が中央、y が下の座標を指定して文字列を描画する

    Parameters

    • str: string

      描画する文字列

    • x: number

      中央の x 座標

    • y: number

      中央下の y 座標

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    Returns void

draw_text_color_tag

  • draw_text_color_tag(str, x, y, default_color, outline_thickness?, outline_color?, font?): void

  • 左下の座標を指定してカラーコードありの文字列を描画する ( <#ff0000>red</> のように <> の中にカラーコードを記載して </> で閉じるまでの箇所が指定されたカラーコードになる )

    Parameters

    • str: string

      描画する文字列

    • x: number

      左下の x 座標

    • y: number

      左下の y 座標

    • default_color: string | Color
    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    Returns void

    Example

    ctx.draw_text_color_tag("white<#ff0000>red</>white<#00ff00>green</><#0000ff>blue</>", 100, 100, Color.white);

draw_text_color_tag_anchor

  • draw_text_color_tag_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?): void

  • 右下の座標を指定してカラーコードありの文字列を描画する ( <#ff0000>red</> のように <> の中にカラーコードを記載して </> で閉じるまでの箇所が指定されたカラーコードになる )

    Parameters

    • str: string

      描画する文字列

    • x: number

      基準となる x 座標

    • y: number

      基準となる y 座標

    • anchor_x: number

      基準となる x 座標の位置

    • anchor_y: number

      基準となる y 座標の位置

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    Returns void

    Example

    ctx.draw_text_color_tag_anchor("white<#ff0000>red</>white<#00ff00>green</><#0000ff>blue</>", 100, 100, Color.white);

draw_text_new_line

  • draw_text_new_line(str, x, y, color, outline_thickness?, outline_color?, font?, pad_y?): void

  • 左上の座標を指定して文字列を描画し、改行文字で改行する

    Parameters

    • str: string

      描画する文字列

    • x: number

      左上の x 座標

    • y: number

      左上の y 座標

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    • Optional pad_y: number

      改行時の y 座標の間隔

    Returns void

draw_text_new_line_anchor

  • draw_text_new_line_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?, pad_y?): void

  • x が中央、y が下の座標を指定して文字列を描画し、改行文字で改行する

    Parameters

    • str: string

      描画する文字列

    • x: number

      基準となる x 座標

    • y: number

      基準となる y 座標

    • anchor_x: number

      基準となる x 座標の位置

    • anchor_y: number

      基準となる y 座標の位置

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    • Optional pad_y: number

      改行時の y 座標の間隔

    Returns void

draw_text_new_line_color_tag

  • draw_text_new_line_color_tag(str, x, y, color, outline_thickness?, outline_color?, font?, pad_y?): void

  • 左上の座標を指定してカラーコードありの文字列を描画し、改行文字で改行する ( <#ff0000>red</> のように <> の中にカラーコードを記載して </> で閉じるまでの箇所が指定されたカラーコードになる )

    Parameters

    • str: string

      描画する文字列

    • x: number

      左下の x 座標

    • y: number

      左下の y 座標

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    • Optional pad_y: number

      改行時の y 座標の間隔

    Returns void

    Example

    ctx.draw_text_new_line_color_tag("white<#ff0000>red</>white<#00ff00>green</><#0000ff>blue</>", 100, 100, Color.white);

draw_text_new_line_color_tag_anchor

  • draw_text_new_line_color_tag_anchor(str, x, y, anchor_x, anchor_y, color, outline_thickness?, outline_color?, font?, pad_y?): void

  • x が中央、y が下の座標を指定してカラーコードありの文字列を描画し、改行文字で改行する ( <#ff0000>red</> のように <> の中にカラーコードを記載して </> で閉じるまでの箇所が指定されたカラーコードになる )

    Parameters

    • str: string

      描画する文字列

    • x: number

      基準となる x 座標

    • y: number

      基準となる y 座標

    • anchor_x: number

      基準となる x 座標の位置

    • anchor_y: number

      基準となる y 座標の位置

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    • Optional pad_y: number

      改行時の y 座標の間隔

    Returns void

    Example

    ctx.draw_text_new_line_color_tag_anchor("white<#ff0000>red</>white<#00ff00>green</><#0000ff>blue</>", 100, 100, Color.white);

draw_text_right

  • draw_text_right(str, x, y, color, outline_thickness?, outline_color?, font?): void

  • 右下の座標を指定して文字列を描画する

    Parameters

    • str: string

      描画する文字列

    • x: number

      右下の x 座標

    • y: number

      右下の y 座標

    • color: string | Color

      色

    • Optional outline_thickness: null | number

      アウトラインの太さ

    • Optional outline_color: null | string | Color

      アウトラインの色

    • Optional font: null | string | Font

      フォント

    Returns void

draw_triangle

  • draw_triangle(x, y, base_length, height, color, fill?, thickness?, angle?): void

  • 三角を描画する

    Parameters

    • x: number

      中心の x 座標

    • y: number

      中心の y 座標

    • base_length: number

      底辺の長さ

    • height: number

      高さ

    • color: string | Color

      色

    • Optional fill: boolean

      塗りつぶすかどうか

    • Optional thickness: number

      塗りつぶさない場合は枠線の太さ

    • Optional angle: number

      三角形の向き

    Returns void

ellipse

  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • radiusX: number
    • radiusY: number
    • rotation: number
    • startAngle: number
    • endAngle: number
    • Optional counterclockwise: boolean

    Returns void

fill

  • fill(fillRule?): void

  • MDN Reference

    Parameters

    • Optional fillRule: CanvasFillRule

    Returns void

  • fill(path, fillRule?): void

  • Parameters

    • path: Path2D
    • Optional fillRule: CanvasFillRule

    Returns void

fillRect

  • fillRect(x, y, w, h): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

fillText

  • fillText(text, x, y, maxWidth?): void

  • MDN Reference

    Parameters

    • text: string
    • x: number
    • y: number
    • Optional maxWidth: number

    Returns void

font_to_str

  • font_to_str(font_object): string

  • フォントオブジェクトを文字列に変換する

    Parameters

    • font_object: string | Font

      フォントオブジェクトか、フォント情報を表す文字列

    Returns string

    フォント情報を表す文字列

getContextAttributes

  • getContextAttributes(): CanvasRenderingContext2DSettings

  • MDN Reference

    Returns CanvasRenderingContext2DSettings

getImageData

  • getImageData(sx, sy, sw, sh, settings?): ImageData

  • MDN Reference

    Parameters

    • sx: number
    • sy: number
    • sw: number
    • sh: number
    • Optional settings: ImageDataSettings

    Returns ImageData

getLineDash

  • getLineDash(): number[]

  • MDN Reference

    Returns number[]

getTransform

  • getTransform(): DOMMatrix

  • MDN Reference

    Returns DOMMatrix

get_height_str

  • get_height_str(str, font?): number

  • フォントを適応した文字の高さを取得する

    Parameters

    • str: string

      高さを取得する文字列

    • Optional font: null | string | Font

      適応するフォント ( 指定しない場合はデフォルトのフォント )

    Returns number

get_height_str_new_line

  • get_height_str_new_line(str, font?, pad_y?): number

  • 改行を考慮してフォントを適応した文字の高さを取得する

    Parameters

    • str: string

      高さを取得する文字列

    • Optional font: null | string | Font

      適応するフォント ( 指定しない場合はデフォルトのフォント )

    • Optional pad_y: number

      改行時の y 座標の間隔

    Returns number

get_width_str

  • get_width_str(str, font?): number

  • フォントを適応した文字の横幅を取得する

    Parameters

    • str: string

      横幅を取得する文字列

    • Optional font: null | string | Font

      適応するフォント ( 指定しない場合はデフォルトのフォント )

    Returns number

get_width_str_new_line

  • get_width_str_new_line(str, font?): number

  • 改行を考慮してフォントを適応した文字の横幅を取得する

    Parameters

    • str: string

      横幅を取得する文字列

    • Optional font: null | string | Font

      適応するフォント ( 指定しない場合はデフォルトのフォント )

    Returns number

isPointInPath

  • isPointInPath(x, y, fillRule?): boolean

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • Optional fillRule: CanvasFillRule

    Returns boolean

  • isPointInPath(path, x, y, fillRule?): boolean

  • Parameters

    • path: Path2D
    • x: number
    • y: number
    • Optional fillRule: CanvasFillRule

    Returns boolean

isPointInStroke

  • isPointInStroke(x, y): boolean

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns boolean

  • isPointInStroke(path, x, y): boolean

  • Parameters

    • path: Path2D
    • x: number
    • y: number

    Returns boolean

lineTo

  • lineTo(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

measureText

  • measureText(text): TextMetrics

  • MDN Reference

    Parameters

    • text: string

    Returns TextMetrics

moveTo

  • moveTo(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

putImageData

  • putImageData(imagedata, dx, dy): void

  • MDN Reference

    Parameters

    • imagedata: ImageData
    • dx: number
    • dy: number

    Returns void

  • putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight): void

  • Parameters

    • imagedata: ImageData
    • dx: number
    • dy: number
    • dirtyX: number
    • dirtyY: number
    • dirtyWidth: number
    • dirtyHeight: number

    Returns void

quadraticCurveTo

  • quadraticCurveTo(cpx, cpy, x, y): void

  • MDN Reference

    Parameters

    • cpx: number
    • cpy: number
    • x: number
    • y: number

    Returns void

rect

  • rect(x, y, w, h): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

reset

  • reset(): void

  • MDN Reference

    Returns void

resetTransform

  • resetTransform(): void

  • MDN Reference

    Returns void

restore

  • restore(): void

  • MDN Reference

    Returns void

rotate

  • rotate(angle): void

  • MDN Reference

    Parameters

    • angle: number

    Returns void

roundRect

  • roundRect(x, y, w, h, radii?): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • Optional radii: number | DOMPointInit | (number | DOMPointInit)[]

    Returns void

  • roundRect(x, y, w, h, radii?): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • Optional radii: number | DOMPointInit | Iterable<number | DOMPointInit>

    Returns void

save

  • save(): void

  • MDN Reference

    Returns void

scale

  • scale(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

setLineDash

  • setLineDash(segments): void

  • MDN Reference

    Parameters

    • segments: number[]

    Returns void

  • setLineDash(segments): void

  • MDN Reference

    Parameters

    • segments: Iterable<number>

    Returns void

setTransform

  • setTransform(a, b, c, d, e, f): void

  • MDN Reference

    Parameters

    • a: number
    • b: number
    • c: number
    • d: number
    • e: number
    • f: number

    Returns void

  • setTransform(transform?): void

  • Parameters

    • Optional transform: DOMMatrix2DInit

    Returns void

stroke

  • stroke(): void

  • MDN Reference

    Returns void

  • stroke(path): void

  • Parameters

    • path: Path2D

    Returns void

strokeRect

  • strokeRect(x, y, w, h): void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

strokeText

  • strokeText(text, x, y, maxWidth?): void

  • MDN Reference

    Parameters

    • text: string
    • x: number
    • y: number
    • Optional maxWidth: number

    Returns void

transform

  • transform(a, b, c, d, e, f): void

  • MDN Reference

    Parameters

    • a: number
    • b: number
    • c: number
    • d: number
    • e: number
    • f: number

    Returns void

translate

  • translate(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

Settings

Member Visibility

Theme

On This Page

canvasdirectionfillStylefilterfontfontKerningfontStretchfontVariantCapsglobalAlphaglobalCompositeOperationimageSmoothingEnabledimageSmoothingQualityletterSpacinglineCaplineDashOffsetlineJoinlineWidthmiterLimitshadowBlurshadowColorshadowOffsetXshadowOffsetYstrokeStyletextAligntextBaselinetextRenderingwordSpacingarcarcTobeginPathbezierCurveToclearRectclipclosePathcolor_to_strcreateConicGradientcreateImageDatacreateLinearGradientcreatePatterncreateRadialGradientdrawFocusIfNeededdrawImagedraw_boxdraw_circledraw_imagedraw_image_anchordraw_linedraw_progress_bardraw_rota_imagedraw_rota_image_3ddraw_seamless_imagedraw_split9_imagedraw_textdraw_text_anchordraw_text_centerdraw_text_color_tagdraw_text_color_tag_anchordraw_text_new_linedraw_text_new_line_anchordraw_text_new_line_color_tagdraw_text_new_line_color_tag_anchordraw_text_rightdraw_triangleellipsefillfillRectfillTextfont_to_strgetContextAttributesgetImageDatagetLineDashgetTransformget_height_strget_height_str_new_lineget_width_strget_width_str_new_lineisPointInPathisPointInStrokelineTomeasureTextmoveToputImageDataquadraticCurveTorectresetresetTransformrestorerotateroundRectsavescalesetLineDashsetTransformstrokestrokeRectstrokeTexttransformtranslate