JSPM

  • Created
  • Published
  • Downloads 14
  • Score
    100M100P100Q70063F
  • License MIT

2D graphic library

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (holst) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Holst is 2D Graphic library

    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
      import { Scene, Renderer2D, Color } from 'holst'
    
      const scene = new Scene()
      const layer = scene.createLayer()
      const shape = layer.createShape({ fill: Color.blue }).circle({ x: 150, y: 150 }, 50)
    
      const animation = scene.createAnimation({ duration: 500 })
      animation.action = ({ t }) => shape.style.fill = Color.fromGradient(t, [Color.blue, Color.red])
      animation.finish = () => shape.style.fill = Color.blue
    
      shape.on('click', () => animation.start())
    
      const canvas = document.getElementById('canvas')
      const renderer = new Renderer2D(canvas.getContext('2d')!!)
      renderer.render(scene)
    </script>

    Documentation

    Get started

    Demo project list

    • getpalette - The demo is how extract unique colors from an uploaded image and make from those colors palette (see live)
    • sprites - shows sprites animation
    • relative-draw - test for draw in the relative coordinate
    • colors - test for how works colors
    • block-scheme-editor - block scheme editor
    • chart3
    • paint
    • viewport - The demo shows the viewport with a scroll box and gives the opportunity to move and/or scale the scene
    • movement - The demo shows shapes moving using matrix transform method

    Road Map

    Drafts