Trabajo con lienzo y dibujo una línea cerrada con el mouse, luego relleno el área interior con algún color (verde, por ejemplo). ¿Cómo lleno el área exterior, no el interior? Aquí hay un trozo de código que uso:
const context = canvas.getContext('2d') canvas.addEventListener('mouseup', function (e) { context.closePath(); context.fill(); draw = false; }); Aquí hay un ejemplo que quiero implementar.
https://jsfiddle.net/tonycaso/drxpb8vy/24/
Pero usa la biblioteca fabricjs, necesito hacerlo con canvas nativo y js.
Puede hacer uso de globalCompositeOperation . Establece el tipo de operación de composición que se aplicará al dibujar nuevas formas. Es posible que desee leer más sobre esto aquí .
En su caso, primero puede llenar todo el lienzo con un color (por ejemplo, verde). Luego deja que el ratón dibuje la forma. Cuando se dibuje la forma, rellénela usando la operación compuesta global destination-out . Recortará la forma del fondo, lo que dará como resultado que el área exterior permanezca rellena.
const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); context.canvas.width = 300; context.canvas.height = 300; canvas.addEventListener('mousedown', function (e) { context.beginPath(); context.moveTo(e.clientX, e.clientY); }); canvas.addEventListener('mousemove', function (e) { context.lineTo(e.clientX, e.clientY); }); canvas.addEventListener('mouseup', function (e) { context.closePath(); // Fill a rect on the entire canvas with the desired color context.fillStyle = "green"; context.fillRect(0, 0, canvas.width, canvas.height); // Cut out the drawn shape context.globalCompositeOperation = "destination-out"; context.fill(); }); canvas { cursor: crosshair; border: 2px solid #000; } <canvas></canvas>Básicamente eso es muy difícil. Debería escribir una función personalizada que verifique cada píxel. Lo que podemos hacer para que sea más fácil es
background (what color you want to fill) fill(the original Background color) //drawYourShape