muntadas-app/src/components/mixins.js

// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
export default {
  methods: {
    deg2rad (deg) {
      return deg * (Math.PI / 180)
    },
    createLabelCanvas (text, fontsize) {
      // console.log('createLabelCanvas', this.data.Titre)
      const size = fontsize
      const borderSize = 5
      let lines = text.split('\n')
      const ctx = document.createElement('canvas').getContext('2d')
      const font = `${size}px bold noto_sans,sans-serif`
      ctx.font = font
      // measure how long the name will be
      const doubleBorderSize = borderSize * 2
      let width = 0
      for (var i = 0; i < lines.length; i++) {
        width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
      }
      const height = size * lines.length + doubleBorderSize
      this.label_size = { x: width / 21, y: height / 21 }
      ctx.canvas.width = width
      ctx.canvas.height = height

      // need to set font again after resizing canvas
      ctx.font = font
      ctx.textBaseline = 'top'

      // ctx.fillStyle = 'red'
      // ctx.fillRect(0, 0, width, height)
      ctx.fillStyle = 'black'
      for (var j = 0; j < lines.length; j++) {
        ctx.fillText(lines[j], borderSize, borderSize + j * size)
      }
      // console.log('createLabelCanvas', ctx)
      return ctx.canvas
    }
  }
}