Simple2canvas NPM

Simple2Canvas

Generate image with json data by canvas https://simple2canvas.netlify.com/

Installation

You can install it with npm or <script>:

npm install simple2canvas --save-dev

<script src="https://unpkg/simple2canvas/dist/simplecanvas.umd.min.js"></script>

Usage

const simple2canvas = require('simple2canvas');
const options = {
  width: 360,
  height: 360,
  rate: 2,
  elements: [
    {
      type: 'rect',
      width: 360,
      height: 360,
      top: 0,
      left: 0,
      fill: '#FFF'
    },
    {
      type: 'text',
      text: 'Hello World!',
      top: 10, 
      left: 10,
      fontSize: 18,
      lineHeight: 18,
      color: 'black'
    }
  ]
};

(async() => {
  const canvas = await simple2canvas(options);
  
  const img = document.createElement('img');
  img.style.width = options.width + 'px';
  img.style.height = options.height + 'px';
  img.src = canvas.toDataURL();
  document.body.appendChild(img);
})();