I want to make a canvas plane with augmented reality on AR.js and A-frame, by the moment it doesn't work, it's only show the white plane and I can't draw on it. Please take a look to the code an comment any possible solution.
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<title>AR.js y A-Frame: Dibujo en Realidad Aumentada</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<!-- Definir el marcador personalizado -->
<a-marker
preset="custom"
type="pattern"
url="https://cdn.glitch.global/69316176-f68c-453d-996f-0d56f38577a4/marker.patt?v=1685648515251"
>
<!-- Plano que servirá como lienzo virtual -->
<a-plane
position="0 0 0"
rotation="-90 0 0"
width="4"
height="2.25"
color="white"
draw="color: black; brushSize: 10"
></a-plane>
</a-marker>
<!-- Cámara y luz -->
<a-entity camera></a-entity>
<a-light type="ambient" position="0 5 0" intensity="0.5"></a-light>
<a-light type="directional" position="2 4 -3" intensity="0.5"></a-light>
</a-scene>
<script>
// Agregar un evento para permitir el dibujo al tocar la pantalla
document.addEventListener("touchstart", function (e) {
Different points of view to solve the possible error on the code and sharing the solution to the community.