Liveworksheets es un sitio web para estudiantes y profesores donde los profesores pueden cargar archivos con preguntas y luego, después de cargar el archivo, el profesor responde estas preguntas y luego envía este archivo a los estudiantes, sin respuestas, por supuesto, para que lo respondan. Hay muchas formas que puede usar el maestro para resolver estas preguntas, pero la forma que me importa es que el maestro puede dibujar rectángulos en una imagen y luego escribir la respuesta en ella.
Mi pregunta es: ¿Cómo puedo dibujar rectángulos escribibles en la imagen usando javascript?
vea la demostración para mayor claridad.
Konva js es una buena apuesta.
Esta herramienta le permite crear formas y guardar todo en una base de datos para que pueda volver a cargar todos los dibujos para uso futuro.
Buen intento
FINALMENTE, después de mucho buscar, encontré Fabric.js , aquí hay un ejemplo de mi código
let fabricCanvas = new fabric.Canvas('your-canvas-id'); // You can change the canvas size via the next two lines fabricCanvas.setHeight(document.getElementById('your-image').height); fabricCanvas.setWidth(document.getElementById('your-image').width); fabric.Image.fromURL(document.getElementById('your-image').src, function (img) { let textBox = new fabric.Textbox("Enter Your Answer", { fontSize: 16, fontFamily: 'Arial', textAlign: 'left', width: 180, top: 0, left: 0, }); fabricCanvas.add(img.set({ left: 0, top: 0 })); fabricCanvas.add(textBox); });