Skip to content

A library focused on avoiding boilerplates when using Web APIs (specially the Canvas API) by abstracting its most common use cases

License

Notifications You must be signed in to change notification settings

LuisArmando-TestCoder/canvas-preset

Repository files navigation

canvas-preset

Import from CDN

Visit the wiki

Usage for React

import React, {useEffect} from 'react'
import preset from 'canvas-preset'
export default () => {
  useEffect(
    () => {
      const { size, clear, draw } = preset()
      
      size()
      draw(() => clear('#f44'))
    },
    []
  )
  return <canvas />
}

Usage for Vue.js

import preset from 'canvas-preset'

export default {
  name: 'JustACircle',
  mounted () {
    const { render } = preset(null, '#justACircle')
    const circle = {
      x: 73,
      y: 42,
      radius: 17,
      color: '#001'
    }
    render(circle).arc()
  }
}

Usage for Svelte

<script>
  import { onMount } from "svelte"
  import preset from "canvas-preset"

  onMount(() => {
    const { size, clear, draw, render } = preset()
        
        const circle = {
          x: 73,
          y: 42,
          radius: 17,
          color: '#001'
        }
      
      size()
      draw(() => {
        clear('#f441')
        circle.x++
        render(circle).arc()
      })
  })
</script>

<canvas />

About

A library focused on avoiding boilerplates when using Web APIs (specially the Canvas API) by abstracting its most common use cases

Resources

License

Stars

Watchers

Forks

Packages

No packages published