import getPx from './getPx';
import circle from './circle';
import line from './line';
import rect from './rect';
import polygon from './polygon';
import draw from './draw';
import image from './image';
import tween from './tween';

/**
 * Create a helpful canvas wrapper that provides several convenient functions
 * for drawing various shapes, lines and images onto an HTML canvas using its
 * 2d drawing context.
 */
const canvas = function canvas(opts) {
  const {
    context,
    devicePixelRatio = 1
  } = opts;
  const px = getPx(devicePixelRatio);
  return {
    context,
    px,
    dimensions: () => {
      const {
        width,
        height
      } = context.canvas;
      return {
        width,
        height
      };
    },
    clear: () => {
      const {
        width,
        height
      } = context.canvas;
      context.clearRect(0, 0, width, height);
    },
    circle: args => circle({
      context,
      px,
      ...args
    }),
    line: args => line({
      context,
      px,
      ...args
    }),
    rect: args => rect({
      context,
      px,
      ...args
    }),
    polygon: args => polygon({
      context,
      px,
      ...args
    }),
    draw: args => draw({
      context,
      px,
      ...args
    }),
    image: args => image({
      context,
      px,
      ...args
    }),
    tween: (...args) => tween(...args)
  };
};
export default canvas;