# renderer/canvas/ImageRenderer.js

    import { drawModel } from './CanvasRenderer'
    import * as InkModel from '../../model/InkModel'

    function createCanvas (borderCoordinates, margin = 10) {
      // eslint-disable-next-line no-undef
      const browserDocument = document
      const canvas = browserDocument.createElement('canvas')
      canvas.width = Math.abs(borderCoordinates.maxX - borderCoordinates.minX) + (2 * margin)
      canvas.style.width = `${canvas.width}px`
      canvas.height = Math.abs(borderCoordinates.maxY - borderCoordinates.minY) + (2 * margin)
      canvas.style.height = `${canvas.height}px`
      return canvas
    }

    /**
     * Generate a PNG image data url from the model
     * @param {Model} model Current model
     * @param {Stroker} stroker Current stroker
     * @param {Number} [margin=10] Margins to apply around the image
     * @return {String} Image data string result
     */
    export function getImage (model, stroker, margin = 10) {
      if (model.rawStrokes.length > 0) {
        const borderCoordinates = InkModel.getBorderCoordinates(model)

        const capturingCanvas = createCanvas(borderCoordinates, margin)
        const renderingCanvas = createCanvas(borderCoordinates, margin)
        const renderStructure = {
          renderingCanvas,
          renderingCanvasContext: renderingCanvas.getContext('2d'),
          capturingCanvas,
          capturingCanvasContext: capturingCanvas.getContext('2d')
        }
        // Change canvas origin
        renderStructure.renderingCanvasContext.translate(-borderCoordinates.minX + margin, -borderCoordinates.minY + margin)
        drawModel(renderStructure, model, stroker)
        return renderStructure.renderingCanvas.toDataURL('image/png')
      }
      return null
    }