Skip to content
Canvas is a Go drawing library based on OpenGL or using software rendering that is very similar to the HTML5 canvas API
Go C
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
backend added a todo, regenerated xmobile backend Jul 10, 2019
examples added an example for software rendering May 13, 2019
glfwcanvas
sdlcanvas fixed key name Oct 1, 2019
testdata implemented software image pattern filling, added a test May 12, 2019
.gitignore added shadow blur to software implementation May 12, 2019
LICENSE
README.md added an example for software rendering May 13, 2019
canvas.go
canvas_test.go tests should run on OpenGL backend May 13, 2019
color.go
freetype.go
go.mod fixed a bug with anticlockwise arcs and ellipses Oct 1, 2019
go.sum fixed a bug with anticlockwise arcs and ellipses Oct 1, 2019
gradients.go removed opaque and deleted flags from backend, deleted state is now m… Feb 27, 2019
images.go small performance improvements May 23, 2019
math.go simplified matrix type Mar 30, 2019
path2d.go fixed a bug with anticlockwise arcs and ellipses Oct 1, 2019
paths.go added ellipse function Oct 1, 2019
shadows.go
text.go small performance improvements May 23, 2019
triangulation.go fixed a problem with closed paths and self intersecting polygons May 12, 2019

README.md

Go canvas GoDoc

Canvas is a pure Go library that provides drawing functionality as similar as possible to the HTML5 canvas API. It has nothing to do with HTML or Javascript, the functions are just made to be approximately the same.

Most of the functions are supported, but it is still a work in progress. The library aims to accept a lot of different parameters on each function in a similar way as the Javascript API does.

Whereas the Javascript API uses a context that all draw calls go to, here all draw calls are directly on the canvas type. The other difference is that here setters are used instead of properties for things like fonts and line width.

OpenGL backend

The OpenGL backend is intended to provide decent performance. Obviously it will not be able to rival hand coded OpenGL for a given purpose, but for many purposes it will be enough. It can also be combined with hand coded OpenGL.

Software backend

The software backend can also be used if no OpenGL context is available. It will render into a standard Go RGBA image.

There is experimental MSAA anti-aliasing, but it doesn't fully work properly yet. The best option for anti-aliasing currently is to render to a larger image and then scale it down.

SDL/GLFW convenience packages

The sdlcanvas and glfwcanvas subpackages provide a very simple way to get started with just a few lines of code. As the names imply they are based on the SDL library and the GLFW library respectively. They create a window for you and give you a canvas to draw with.

OS support

Both the OpenGL and software backends work on the following operating systems:

  • Linux
  • Windows
  • macOS
  • Android
  • iOS

Using gomobile to build a full Go app using gomobile build now works by using an offscreen texture to render to and then rendering that to the screen. See the example in examples/gomobile. The offscreen texture is necessary since gomobile automatically creates a GL context without a stencil buffer, which this library requires.

Example

Look at the example/drawing package for some drawing examples.

Here is a simple example for how to get started:

package main

import (
	"math"

	"github.com/tfriedel6/canvas/sdlcanvas"
)

func main() {
	wnd, cv, err := sdlcanvas.CreateWindow(1280, 720, "Hello")
	if err != nil {
		panic(err)
	}
	defer wnd.Destroy()

	wnd.MainLoop(func() {
		w, h := float64(cv.Width()), float64(cv.Height())
		cv.SetFillStyle("#000")
		cv.FillRect(0, 0, w, h)

		for r := 0.0; r < math.Pi*2; r += math.Pi * 0.1 {
			cv.SetFillStyle(int(r*10), int(r*20), int(r*40))
			cv.BeginPath()
			cv.MoveTo(w*0.5, h*0.5)
			cv.Arc(w*0.5, h*0.5, math.Min(w, h)*0.4, r, r+0.1*math.Pi, false)
			cv.ClosePath()
			cv.Fill()
		}

		cv.SetStrokeStyle("#FFF")
		cv.SetLineWidth(10)
		cv.BeginPath()
		cv.Arc(w*0.5, h*0.5, math.Min(w, h)*0.4, 0, math.Pi*2, false)
		cv.Stroke()
	})
}

The result:

Implemented features

These features should work just like their HTML5 counterparts, but there are likely to be a lot of edge cases where they don't work exactly the same way.

  • beginPath
  • closePath
  • moveTo
  • lineTo
  • rect
  • arc
  • arcTo
  • quadraticCurveTo
  • bezierCurveTo
  • stroke
  • fill
  • clip
  • save
  • restore
  • scale
  • translate
  • rotate
  • transform
  • setTransform
  • fillText
  • measureText
  • textAlign
  • textBaseline
  • fillStyle
  • strokeText
  • strokeStyle
  • linear gradients
  • radial gradients
  • image patterns with repeat and transform
  • lineWidth
  • lineEnd (square, butt, round)
  • lineJoin (bevel, miter, round)
  • miterLimit
  • lineDash
  • getLineDash
  • lineDashOffset
  • global alpha
  • drawImage
  • getImageData
  • putImageData
  • clearRect
  • shadowColor
  • shadowOffset(X/Y)
  • shadowBlur
  • isPointInPath
  • isPointInStroke
  • self intersecting polygons

Missing features

  • globalCompositeOperation
  • imageSmoothingEnabled
  • textBaseline hanging and ideographic (currently work just like top and bottom)
You can’t perform that action at this time.