Me gustaría aplicar un cursor png específico a solo una parte de un lienzo. Tengo esto, que funciona bien para todo el lienzo.
.myClass { cursor: url('../img/myCursor.png') 7 33, auto; /* img hotspot centred*/ }Pero me gustaría, por ejemplo, aplicarlo solo al 50% del lienzo de la mano izquierda (o digamos los primeros 300px en el eje x).
Es posible ?
Puede colocar 2 divs sobre el lienzo y tener una propiedad de cursor diferente para cada uno:
const c = document.querySelector('canvas').getContext('2d'); c.beginPath(); c.moveTo(200, 0); c.lineTo(200, 400); c.stroke(); /* draw vertical line down middle */ .container { position: relative; width: 400px; } canvas { border: 1px solid; } .positioned { position: absolute; top: 0; height: 100%; width: 50%; } #left { left: 0; cursor: url('https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1') 7 33, auto; } #right { cursor: url('https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176') 7 33, auto; right: 0px; } <div class="container"> <canvas height="400" width="400"></canvas> <div class="positioned" id="left"></div> <div class="positioned" id="right"></div> </div>