Scalanimate is a Scala library that allows you to draw into a canvas object on a web page. Widely inspired by Scratch and WoofJS, it has been designed especially for beginners who intend to learn programming in an interactive way!

Scalanimate provides you with a very simple API that will let you draw simple shapes, animate them, look for collisions and more! This tutorial will show you everything you need to know before you can create your first game!

Getting Started

Before we can work, we first need to set up a few things...

Install from Github

  1. You will first need to git clone [email protected]:xavierpantet/scalanimate.git
  2. Write your code in src/main/scala/Main.scala
  3. Run sbt
  4. Run fastOptJS from the SBT console
  5. Your game is now accessible at localhost:12345/index.html

Install from SBT (Scala.js projects)

  1. Make sure you are using Scala 2.12+
  2. Add the following lines to your build.sbt:
    libraryDependencies += "default" %%% "scalanimate" % "1.0.1"
    resolvers += Resolver.bintrayRepo("xavierpantet", "scalanimate")
  3. Write your scala code and compile it to Javascript using the fastOptJS command
  4. Include your JS file to your web page using standard HTML code:
    <script src="./target/scala-2.12/your-project-name-fastopt.js"></script>

Create a canvas

In any case, every Scalanimate object that you will manipulate will need to be given a Canvas as parameter. A very convenient way of doing this is to make it implicit. We provide you with the 3 following constructors:


You will find all the examples in the scalanimate.examples package.

import scalanimate.examples._
object Main{
    def main(args: Array[String]): Unit = {
        /* Uncomment the desired example: */


You can visualize them by opening localhost:12345/index.html


Shapes are the basic constructs for your games! Let's create a few ones!

Drawing shapes

val circle = Circle(100, 50, 20)
val rect = Rectangle(80, 130, 50, 120)
val polygon = Polygon(200, 80, 30, 5)
val oval = Oval(150, 20, 60, 40)

This will draw:

  1. A circle centered in (100, 50) with radius 20
  2. A rectangle whose bottom-left corner is at (200, 100) of height 50 and width 120
  3. A 5-sided polygon centered in (200, 80) of radius 30
  4. An oval centered in (150, 20) of width 60 and height 40

Customizing shapes

Shapes allow you to customize them in many ways!


val shape = ...

// Changes fill color to red
shape.fillColor =

// Changes border color to blue
shape.borderColor =


val shape = ...

// Moves the shape to position (50, 80)
shape.x = 50
shape.x = 80
// You can perform the same thing like this
shape.moveTo(50, 80)

// Moves the shape by 10 pixels to the right and 5 pixels to the top
shape.x += 10
shape.y -= 5
// Alternatively, you can do
shape.move(10, -5)

// Moves the shape 20 pixels along its direction


val shape = ...

// Rotates the shape of 15°

// Rotates the shape to point to (x, y)
shape.pointTowards(x, y)

// Rotates the shape to point to another shape

Showing / Hiding

val shape = ...

Other controls

val shape = ...

// Distance between two shapes

// Know if (x, y) belongs to a shape
shape.contains(x, y)

// Collision detection between shapes

// Collision detection with edges of the canvas

// Reacting to user input
shape.onMouseDown = _ => {
    your code here...

shape.onMouseUp = _ => {
    your code here...


Images provide the exact same API as shapes, with a few additions that you'll find here.

// Create an image from WoofJS library. Top left corner at (100, 100) with height and width 50
val image = Image(Image.Puppy, 100, 100, 50, 50)

// The same thing applies to backgrounds
val background = Image(Background.Space, 0, 0, width, height)

// Custom images
val image = Image("", 100, 100, 50, 50)

Images provide you with the following additional API:

val image = ...

// Flip horizontally + vertically


Controls allow you to react to user inputs (mouse clicks and keyboard usage).

val canvas = Canvas("myCanvas", width, height)
// These are Scala.js primitives
canvas.onmousedown = (MouseEvent: e) => {
    your code here...

canvas.onmouseup = (MouseEvent: e) => {
    your code here...

// Access pressed keyboard keys

Time Controls

Time Controls allow you to write loops and animate your code in a very simple way.

    your code here...

This will execute your code once and automatically refresh the rendering of your game every 20ms.

every(20.milliseconds){ t => {
    // variable t contains the current "tick" number
    your code here...

This will execute your every 20ms. It is very useful to give an impression of mouvement to your games!

everyIncr(20.milliseconds){ t => {
    // variable t contains the current "tick" number
    your code here...

This is a specific version of the standard every method. The difference is that the canvas is not updated here.

    your code here...

This will execute your code after 1 second.

repeatWhile(condition, 20.milliseconds){ t => {
    // variable t contains the current "tick" number
    your code here...

This will execute your code every 20ms until the condition is not verified anymore.

repeat(10, 20.milliseconds){ t => {
    // variable t contains the current "tick" number
    your code here...

This will execute your code 10 times every 20ms.