# Clicks on cavas are broken

**URL:** <https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404>\
**Category:** Bugs\
**Tags:** web, web-sdk\
**Created:** [August 24, 2023, 11:28am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404 "2023-08-24T11:28:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 24, 2023, 11:28am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/1 "2023-08-24T11:28:43Z")

</div>

When clicking on `canvas` that is used by DeepAR, we get an error

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/deepar/original/1X/b596c5b544e617d940ac772d01595b4dba8cdac6.png)

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [August 28, 2023, 11:30am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/2 "2023-08-28T11:30:49Z")

</div>

Hello, could you give us more info which example are you running?

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 28, 2023, 3:40pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/3 "2023-08-28T15:40:45Z")

</div>

This is from our code.  
It happens when you use `<video>` as an video source, and render DeepAR on `<canvas>`.  
Clicks on this canvas are broken, even if you don’t have `onClick` event handler

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [August 28, 2023, 3:44pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/4 "2023-08-28T15:44:09Z")

</div>

Have you tried registering canvas listeners? Here is some sample code.

```auto
             var touchOccurring = false;
            
            const canvasRect = canvas.getBoundingClientRect();
            const touchInfo = (e, type) => ({
              x: e.clientX - canvasRect.left,
              y: e.clientY - canvasRect.top,
              type
            });

            registerCanvasListener('mousedown', e => {
              if (!touchOccurring) {
                deepAR.touchOccurred(touchInfo(e, ARTouchType.Start))
                touchOccurring = true;
              }
            });
            registerCanvasListener('touchstart', e => {
              if (!touchOccurring) {
                deepAR.touchOccurred(touchInfo(e.touches[0], ARTouchType.Start))
                touchOccurring = true;
              }
            });
            registerCanvasListener('mousemove', e => {
              if (touchOccurring) {
                deepAR.touchOccurred(touchInfo(e, ARTouchType.Move));
              }
            });
            registerCanvasListener('touchmove', e => {
              if (touchOccurring) {
                e.preventDefault(); // Prevent scrolling.
                deepAR.touchOccurred(touchInfo(e.touches[0], ARTouchType.Move))
              }
            });
            registerCanvasListener('mouseup', e => {
              if (touchOccurring) {
                deepAR.touchOccurred(touchInfo(e, ARTouchType.End))
                touchOccurring = false;
              }
            });
            registerCanvasListener('mouseout', e => {
              if (touchOccurring) {
                //deepAR.touchOccurred(touchInfo(e, ARTouchType.End))
               // touchOccurring = false;
              }
            });
            registerCanvasListener('touchend', e => {
              if (touchOccurring) {
                deepAR.touchOccurred(touchInfo(e.touches[0], ARTouchType.End))
                touchOccurring = false;
              }
            });

        }
      });

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 28, 2023, 3:49pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/5 "2023-08-28T15:49:59Z")

</div>

Is it possible to do this in react’s style?

```auto
<canvas onClick={...} ... />

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 28, 2023, 3:56pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/6 "2023-08-28T15:56:27Z")

</div>

`deepAR.touchOccured` is deprecated in `5.4.0`

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [August 28, 2023, 7:51pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/7 "2023-08-28T19:51:20Z")

</div>

Sorry i assumed you were using an older SDK. If you are using the latest SDK the touches should just work automatically. Can you share your source code?

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 29, 2023, 7:06am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/8 "2023-08-29T07:06:04Z")

</div>

Elements in use:

```auto
<div>
      <video ref={localVideoRef} ... />
      <canvas ref={localVideoCanvasRef} ... />
</div>

```

DeepAR initialization:

```auto
  useEffect(() => {
    const setup = async () => {
      if (localVideoRef.current && localVideoCanvasRef.current) {
        const deepAR = await deeparModule.initialize({
          licenseKey: "...",
          canvas: localVideoCanvasRef.current,
          additionalOptions: {
            cameraConfig: {
              disableDefaultCamera: true
            }
          },
        })
        deepAR.setVideoElement(localVideoRef.current)
        await deepAR.switchEffect("https://cdn.jsdelivr.net/npm/deepar/effects/aviators")
      }
    }
    setup()
  }, [localVideoRef, localVideoCanvasRef])

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [September 8, 2023, 1:48pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/9 "2023-09-08T13:48:48Z")

</div>

Any progress on this issue?

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [September 11, 2023, 8:59am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/10 "2023-09-11T08:59:18Z")

</div>

Your setup code looks okay, what exactly are you trying do to with touches?

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [September 11, 2023, 11:00pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/11 "2023-09-11T23:00:50Z")

</div>

Swap camera on touch

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [September 19, 2023, 4:15am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/12 "2023-09-19T04:15:53Z")

</div>

Noticed recently: this only happens with touches. Testing with chrome dev tools in iPhone mode.  
Clicks on desktop work fine.

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [September 25, 2023, 4:47am UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/13 "2023-09-25T04:47:46Z")

</div>

Fixed in most recent `5.4.3` version

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [September 25, 2023, 2:48pm UTC](https://forum.deepar.ai/t/clicks-on-cavas-are-broken/404/14 "2023-09-25T14:48:14Z")

</div>

Thanks for letting us know