pixelartcanvas v1.0.11

PixelartCanvas

About

A simple react component that renders a canvas component containing a pixel art image from an given array of data.

Hou to use it

Installing

-

Using

import PixelArtCanvas from 'pixelartcanvas';

const dataInput = [
  ['000', '888', 'aaa', 'ccc', 'eee'],
  ['000', '880000', 'aa0000', 'cc0000', 'ee0000'],
  ['000', '008800', '00aa00', '00cc00', '00ee00'],
  ['000', '000088', '0000aa', '0000cc', '0000ee'],
  ['000', '000', '000', '000', 'cc88cc'],
];

const MyComponent = () => (
  <>
    <PixelArtCanvas width="200px" height="200px" inputData={dataInput} />
  </>
);

export default MyComponent;

The 'PixelArtCanvas' component has the following properties:

• width: string? (40px) - canvas element width
• height: string? (40px) - canvas element height
• pixelSize: number? (40) - size of each rendered pixel
• inputData: color - array containing the required info for composing each pixel