Salam
Online editor

Standard library · Web and browser

web/canvas

Drawing shapes, text and images on a browser canvas element.

import web.canvas
On this page
  1. Functions

This package gives plain functions for two dimensional drawing on a canvas element. As with dom, the program is translated for the browser with salam js. Get the drawing context with Get and pass it to every function. The coordinates start at the top left corner and the vertical axis points down.

Functions

Get

func Get(id: str): i64
The two dimensional drawing context of the canvas element with this id.
web-canvas-Draw.salam
import dom
import web.canvas

func main:
    el := dom.Create("canvas")
    dom.SetAttr(el, "id", "board")
    dom.SetAttr(el, "width", "320")
    dom.SetAttr(el, "height", "200")
    dom.Append(dom.Body(), el)
    c := canvas.Get("board")
    println canvas.Width(c), canvas.Height(c)

    canvas.FillStyle(c, "#f5f0e6")
    canvas.FillRect(c, 0, 0, canvas.Width(c), canvas.Height(c))
    canvas.FillStyle(c, "#2a7")
    canvas.RoundRect(c, 20, 20, 120, 60, 12)
    canvas.Fill(c)
    canvas.StrokeStyle(c, "#333")
    canvas.LineWidth(c, 2)
    canvas.StrokeRect(c, 160, 20, 120, 60)
    canvas.ClearRect(c, 170, 30, 20, 20)

    canvas.BeginPath(c)
    canvas.MoveTo(c, 20, 180)
    canvas.LineTo(c, 100, 100)
    canvas.LineTo(c, 180, 180)
    canvas.ClosePath(c)
    canvas.Stroke(c)
    canvas.BeginPath(c)
    canvas.Arc(c, 250, 140, 30, 0, 6.2832)
    canvas.Alpha(c, 0.5)
    canvas.Fill(c)
    canvas.Alpha(c, 1)

    canvas.Save(c)
    canvas.Translate(c, 160, 100)
    canvas.Rotate(c, 0.2)
    canvas.Scale(c, 1.5, 1.5)
    canvas.Font(c, "16px Inter")
    canvas.TextAlign(c, "center")
    canvas.FillStyle(c, "#000")
    canvas.FillText(c, "hello", 0, 0)
    canvas.Restore(c)

    image := dom.LoadImage("logo.png")
    if dom.ImageReady(image):
        canvas.DrawImage(c, image, 260, 10, 50, 50)
    end
    second := canvas.Of(dom.Create("canvas"))
    println second != 0
end

Of

func Of(el: i64): i64
The drawing context of a canvas element you already hold.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Width

func Width(c: i64): f64
The canvas width in pixels.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Height

func Height(c: i64): f64
The canvas height.

The example for this item is shown with the ones above: web-canvas-Draw.salam

FillStyle

func FillStyle(c: i64, v: str)
The fill colour, such as #2a7 or red.

The example for this item is shown with the ones above: web-canvas-Draw.salam

StrokeStyle

func StrokeStyle(c: i64, v: str)
The colour of the lines.

The example for this item is shown with the ones above: web-canvas-Draw.salam

LineWidth

func LineWidth(c: i64, v: f64)
The thickness of the lines.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Font

func Font(c: i64, v: str)
The text font in CSS terms, such as 16px Inter.

The example for this item is shown with the ones above: web-canvas-Draw.salam

TextAlign

func TextAlign(c: i64, v: str)
The horizontal text alignment: left, center or right.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Alpha

func Alpha(c: i64, v: f64)
The transparency of everything drawn after this, from 0 to 1.

The example for this item is shown with the ones above: web-canvas-Draw.salam

FillRect

func FillRect(c: i64, x: f64, y: f64, w: f64, h: f64)
A filled rectangle.

The example for this item is shown with the ones above: web-canvas-Draw.salam

StrokeRect

func StrokeRect(c: i64, x: f64, y: f64, w: f64, h: f64)
The outline of a rectangle.

The example for this item is shown with the ones above: web-canvas-Draw.salam

ClearRect

func ClearRect(c: i64, x: f64, y: f64, w: f64, h: f64)
Clears a part of the canvas and makes it transparent.

The example for this item is shown with the ones above: web-canvas-Draw.salam

RoundRect

func RoundRect(c: i64, x: f64, y: f64, w: f64, h: f64, r: f64)
Adds a rectangle with rounded corners to the path; call Fill or Stroke afterwards.

The example for this item is shown with the ones above: web-canvas-Draw.salam

BeginPath

func BeginPath(c: i64)
Starts a new path.

The example for this item is shown with the ones above: web-canvas-Draw.salam

ClosePath

func ClosePath(c: i64)
Closes the path back to its starting point.

The example for this item is shown with the ones above: web-canvas-Draw.salam

MoveTo

func MoveTo(c: i64, x: f64, y: f64)
Moves the pen to this point without drawing.

The example for this item is shown with the ones above: web-canvas-Draw.salam

LineTo

func LineTo(c: i64, x: f64, y: f64)
Adds a line segment up to this point to the path.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Arc

func Arc(c: i64, x: f64, y: f64, r: f64, a: f64, b: f64)
An arc with the given centre and radius, from the start angle to the end angle in radians; a full circle is 0 to 2π.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Fill

func Fill(c: i64)
Fills the inside of the path.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Stroke

func Stroke(c: i64)
Draws the line of the path.

The example for this item is shown with the ones above: web-canvas-Draw.salam

FillText

func FillText(c: i64, t: str, x: f64, y: f64)
Writes the text at this point.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Save

func Save(c: i64)
Keeps the current colours, font and transforms.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Restore

func Restore(c: i64)
Brings back the last kept state.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Translate

func Translate(c: i64, x: f64, y: f64)
Moves the origin of the coordinates.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Rotate

func Rotate(c: i64, a: f64)
Rotates everything drawn after this by this angle in radians.

The example for this item is shown with the ones above: web-canvas-Draw.salam

Scale

func Scale(c: i64, x: f64, y: f64)
Makes everything drawn after this larger or smaller.

The example for this item is shown with the ones above: web-canvas-Draw.salam

DrawImage

func DrawImage(c: i64, img: i64, x: f64, y: f64, w: f64, h: f64)
Draws an image you got from LoadImage into this rectangle.

The example for this item is shown with the ones above: web-canvas-Draw.salam