shine: Declarative graphics for the browser using GHCJS

[ graphics, javascript, library, mit, web ] [ Propose Tags ]

Shine wraps javascript's drawing functions in a declarative API. Heavily inspired by Gloss.

Read the README for an overview of the library.

[Skip to Readme]


Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


Versions [RSS],,,,,
Change log
Dependencies base (>=4.11 && <4.13), ghcjs-dom (>=0.9 && <0.10), ghcjs-prim (>=0.1 && <0.2), keycode (>=0.2 && <0.3), mtl (>=2.2 && <2.3), time (>=1.8 && <1.10), transformers (>=0.5 && <0.6) [details]
License MIT
Copyright (c) 2016-2019 Francesco Gazzetta
Author Francesco Gazzetta
Maintainer Francesco Gazzetta <>
Category Web, Graphics, Javascript
Home page
Bug tracker
Source repo head: git clone
Uploaded by fgaz at 2020-01-04T15:55:20Z
Reverse Dependencies 1 direct, 1 indirect [details]
Downloads 3830 total (16 in the last 30 days)
Rating 2.25 (votes: 2) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs uploaded by user [build log]
All reported builds failed as of 2020-01-04 [all 2 reports]

Readme for shine-

[back to package description]

Shine - Declarative Graphics for the Web

Build Status

Shine wraps javascript's drawing functions in a declarative API.

Heavily inspired by gloss.

demo (compiled shine-examples) here


You need ghcjs

A great way of building ghcjs packages is to use the reflex platform



To represent your drawing you have to build a tree using the Picture datatype.

pic :: Picture
pic = Rect 10 20 -- represents a 10x20 square

To compose multiple Pictures you can use Over, which accepts two Pictures and overlaps them.

Picture is a monoid: <> is an alias for Over and mempty is the empty picture.

-- draw some shapes on top of each other
pic :: Picture
pic = Rect 10 20
   <> Translate 30 30 (Circle 15)
   <> Colored (Color 255 0 0 0.2) (RectF 4 4)
   <> Text "Sans 12px" LeftAlign 200 "The quick brown fox jumps over the lazy dog."

Using Foldable you can do things like

concentricCircles :: Picture
concentricCircles = foldMap Circle [1,10..100]

Drawing Pictures

Before drawing anything you need to obtain a CanvasRenderingContext2D (and sometimes a Document). For this purpose, shine provides two utility functions: fullScreenCanvas and fixedSizeCanvas


import Graphics.Shine
import Graphics.Shine.Input
import Graphics.Shine.Picture

import GHCJS.DOM (currentDocumentUnchecked)

-- This is how the ghcjs-dom hello-world does it.
-- It's boilerplate, so in the next shine version there
-- will probably be a ready-to-use run function
#if defined(ghcjs_HOST_OS)
run :: a -> a
run = id
#elif defined(MIN_VERSION_jsaddle_wkwebview)
import Language.Javascript.JSaddle.WKWebView (run)
import Language.Javascript.JSaddle.WebKitGTK (run)

main :: IO ()
main = run $ do
    doc <- currentDocumentUnchecked -- use currentDocument to handle failure
    ctx <- fixedSizeCanvas doc 400 400
    -- do something with ctx (and maybe doc)

To render a Picture on a context you have three options:


You can draw it manually using render from Graphics.Shine.Render

main :: IO ()
    {- omitted: get the context, see before -}
    render ctx concentricCircles


You can draw a Picture that depends on time. That is, a Float -> Picture.

-- An expanding-and-contracting circle.
animation :: Float -> Picture
animation = Translate 200 200
          . Circle
          . (*100) . (+1) -- bigger positive oscillation
          . sin -- the circle's radius oscillates

main :: IO ()
main =  do
    {- omitted: get the context, see before -}
    animate ctx 30 animation


Finally, you can draw a Picture that depends on time, inputs (keyboard and mouse) and an internal state. This is especially useful for games, hence the name.

-- this code draws a black rectangle in the center of the canvas only when the
-- left mouse button is pressed
main :: IO ()
main = do
    {- omitted: get the context and the document, see before -}
    play ctx doc 30 initialState draw handleInput step
    -- our state represents the state of the left mouse button
    initialState = Up
    -- we draw a square only if the button is pressed
    draw Up = Empty
    draw Down = Translate 200 200 $ RectF 200 200
    -- when an event is fired we store the button state
    handleInput (MouseBtn BtnLeft buttonState _) = const buttonState
    handleInput _ = id -- catch-all for all other events
    step _ = id -- our state does not depend on time


See the shine-examples package (Hackage).

Handling assets

Handling assets with ghcjs and the browser is somewhat tricky.

The usual way of doing it for normal haskell programs is to use data-files. Unfortunately, this work by either hardcoding an absolute path in the executable, which will not work when the program is put on a server in a different path, or with an environment variable override ($pkgname_datadir), which will not work because environment variables do not exist in the browser.

So, for now, the solution is to explicitly specify absolute or relative paths in the source code, and then to manyully copy the assets to the appropriate location after building/deploying the code. This is what I did in the animated-shapes demo for the peppers image.

Relevant cabal ticket, discussing a possible new way of handling assets: