Canvas only draws outside the table, with the exception of the first one

Question

Canvas only draws outside the table, with the exception of the first one

I am facing an issue with placing multiple signature pads inside table cells.

Only the first canvas gets drawn, while the others remain blank. I have checked the mouse/touch events. The events are triggered (up/down/move) and the draw function is called, but the canvas does not get drawn.

On using toDataURL, the result is just a white image.

The canvas outside the table works perfectly fine and gets drawn as expected.

I have searched for documentation on this issue but couldn't find any. Any help would be appreciated.

Here is the code snippet:

// This is the draw function
const init = function (el) {
  let context = el.getContext("2d");
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 2;

  let offset = {
    left: el.offsetLeft,
    top: el.offsetTop,
  }

  let down = false
  let points = []

  // Rest of the code for event handlers and Vue component

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <div id="app">
    <table>
      <tr>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
      </tr>
      <tr>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
      </tr>
    </table>
    <signature :width="200" :height="200"></signature>
    <signature :width="200" :height="200"></signature>
  </div>

javascript vue.js html5-canvas vue-component

Answer 1

Answer №1

There was an issue with the offset.

I mistakenly extracted the offset coordinates of the canvas, but it should refer to the border box of an element relative to the offsetParent.

The correct method to use is Element.getClientRects()

The code below has been adjusted.

// This is the draw function
const initialize = function (element) {
  let context = element.getContext("2d");
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 2;

  let clientRect = element.getClientRects()

   let offset = {
     left : clientRect[0].left,
     top : clientRect[0].top,
   }

  let down = false
  let points = []

  function draw() {
    context.beginPath();

    for (let i = 0; i < points.length - 1; i++) {
      const p = points[i]
      const pn = points[i + 1]
      if (pn.x === p.x && p.y === pn.y && p.first && pn.last) {
        context.arc(pn.x, pn.y, 1, 0, 2 * Math.PI);
        context.fill()
      } else {
        context.moveTo(p.x, p.y)
        context.lineTo(pn.x, pn.y)
      }
    }

    context.stroke();
    context.closePath();
  }

  function addPoint(ev, setting) {
    setting = setting || {}

    let p = {
      x: ev.clientX - offset.left,
      y: ev.clientY - offset.top,
      ...setting,
    }
    points.push(p)
  }

  function downHandler(event) {
    down = true
    addPoint(event, {first: true})
    event.preventDefault()
  }

  function moveHandler(event) {
    if (!down) {
      return
    }

    addPoint(event, {drag: true})
    draw()
    event.preventDefault()
  }

  function upHandler(event) {
    down = false
    addPoint(event, {last: true})
    draw()
    points.splice(0, points.length)
    event.preventDefault()
  }

  element.addEventListener("pointerdown", downHandler, false);
  element.addEventListener("pointermove", moveHandler, false);
  element.addEventListener("pointerup", upHandler, false);
  element.style['touch-action'] = 'none'
}

Vue.component('signature', {
  props: {
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    customStyle: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  mounted() {
    initialize(this.$refs.signaturePadCanvas)
  },
  render(createElement) {
    const {width, height, customStyle} = this;

    return createElement(
      'div',
      {
        style: {
          width: `${width}px`,
          height: `${height}px`,
          ...customStyle,
        },
      },
      [
        createElement('canvas', {
          attrs: {
            width: width,
            height: height,
          },
          style: {
            width: '100%',
            height: '100%',
            'touch-action': 'none',
            'background': 'gray',
          },
          ref: 'signaturePadCanvas',
        }),
      ],
    );
  },
})

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <div id="app">
    <table>
      <tr>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
      </tr>
      <tr>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
      </tr>
    </table>
    <signature :width="200" :height="200"></signature>
    <signature :width="200" :height="200"></signature>
  </div>

Answer 2

There was an issue with the offset.

I mistakenly extracted the offset coordinates of the canvas, but it should refer to the border box of an element relative to the offsetParent.

The correct method to use is Element.getClientRects()

The code below has been adjusted.

// This is the draw function
const initialize = function (element) {
  let context = element.getContext("2d");
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 2;

  let clientRect = element.getClientRects()

   let offset = {
     left : clientRect[0].left,
     top : clientRect[0].top,
   }

  let down = false
  let points = []

  function draw() {
    context.beginPath();

    for (let i = 0; i < points.length - 1; i++) {
      const p = points[i]
      const pn = points[i + 1]
      if (pn.x === p.x && p.y === pn.y && p.first && pn.last) {
        context.arc(pn.x, pn.y, 1, 0, 2 * Math.PI);
        context.fill()
      } else {
        context.moveTo(p.x, p.y)
        context.lineTo(pn.x, pn.y)
      }
    }

    context.stroke();
    context.closePath();
  }

  function addPoint(ev, setting) {
    setting = setting || {}

    let p = {
      x: ev.clientX - offset.left,
      y: ev.clientY - offset.top,
      ...setting,
    }
    points.push(p)
  }

  function downHandler(event) {
    down = true
    addPoint(event, {first: true})
    event.preventDefault()
  }

  function moveHandler(event) {
    if (!down) {
      return
    }

    addPoint(event, {drag: true})
    draw()
    event.preventDefault()
  }

  function upHandler(event) {
    down = false
    addPoint(event, {last: true})
    draw()
    points.splice(0, points.length)
    event.preventDefault()
  }

  element.addEventListener("pointerdown", downHandler, false);
  element.addEventListener("pointermove", moveHandler, false);
  element.addEventListener("pointerup", upHandler, false);
  element.style['touch-action'] = 'none'
}

Vue.component('signature', {
  props: {
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    customStyle: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  mounted() {
    initialize(this.$refs.signaturePadCanvas)
  },
  render(createElement) {
    const {width, height, customStyle} = this;

    return createElement(
      'div',
      {
        style: {
          width: `${width}px`,
          height: `${height}px`,
          ...customStyle,
        },
      },
      [
        createElement('canvas', {
          attrs: {
            width: width,
            height: height,
          },
          style: {
            width: '100%',
            height: '100%',
            'touch-action': 'none',
            'background': 'gray',
          },
          ref: 'signaturePadCanvas',
        }),
      ],
    );
  },
})

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <div id="app">
    <table>
      <tr>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
      </tr>
      <tr>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
        <td>
          <signature :width="200" :height="200"></signature>
        </td>
      </tr>
    </table>
    <signature :width="200" :height="200"></signature>
    <signature :width="200" :height="200"></signature>
  </div>

Canvas only draws outside the table, with the exception of the first one

Answer №1

Similar questions

Learn how to access the checkbox event.target.checked and event.target.value properties in Vuetify

Problem with flags series in Highcharts/Highstock

Understanding how to break down intricate JSON strings into classes using either VB or C# programming languages

Dynamic components enable parental involvement in child communication

Creating a scrolling effect similar to the Nest Thermostat

What is the jQuery equivalent for converting this JavaScript code?

Display alternative text dynamically

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

Obtain the URL link from Unsplash where the picture is sourced

Creating fake data on a worldwide scale with Vue testing utilities

Is there a way to use JavaScript to import several custom fonts at once?

Arrow indicating the correct direction to expand or collapse all items with a single click

Exploring the incorporation of interfaces into Vue.js/Typescript for variables. Tips?

Integrate the dForm plugin with a convenient time picker widget

Vue 3 tutorial: How to implement v-model calculations with Axios in a web application

The npm start command is no longer functioning in Angular 5

Do all descendants consistently trigger rerenders?

Angular-ui typeahead feature allows users to search through a predefined

Shut down the tab or browser window containing information on vue