import { useCanvas } from 'easy-use-canvas'

const { canvas, ctx } = useCanvas()

canvas.width = 1000

canvas.height = 900

document.getElementById('container')?.appendChild(canvas)

const p1 = {
    x: 10,
    y: 10,
  }
  const p2 = {
    x: 100,
    y: 200,
  }
  options: {
      font: '24px serif',
      fillStyle: '#244477',
  }
  ctx.drawLine(p1, p2, options)

  // 也可以传入三个参数：起点，长度，以水平参考逆时针角度，
  // 返回值为终点对象
  const nextPoint = ctx.drawLine(p2, 200, -95)

const p1 = {
    x: 10,
    y: 10,
  }
  const p2 = {
    x: 100,
    y: 200,
  }
  const p3 = {
    x: 500,
    y: 300,
  }
  
  ctx.drawLines([p1, p2, p3, p1])

const r = {
    x: 100,
    y: 200,
    width: 200,
    height: 160,
  }
  const r2 = {
    x: 200,
    y: 100,
    width: 400,
    height: 160,
  }
  
  ctx.drawFillRect(r, {
    fillStyle: '#c1c1c1',
  })
  ctx.drawStrokeRect(r2, {
    strokeStyle: '#555555',
  })

const t1 = {
    content: '你好，欢迎来到米奇妙妙屋',
    point: p2,
    options: {
      font: '24px serif',
      fillStyle: '#244477',
    },
  }

  const t2 = {
    content: '我叫米奇，很高兴认识你.',
    point: p3,
    options: {
      font: '14px serif',
      fillStyle: '#574277',
    },
  }
  
  const t3 = {
    content: '你愿意和我做朋友吗？',
    point: p1,
    options: {
      font: '24px serif',
      fillStyle: '#000000',
    },
  }

  ctx.drawText(t3)

  ctx.drawText([t1, t2, t3], {
    maxWidth: 140,
    lineHeight: 24,
    maxRows: 3,
  })

ctx.drawImg(p1, {
    url: 'https://mdn.mozillademos.org/files/5395/backdrop.png',
  })

tx.drawImg(p1, {
    source: img
  })