Liveworksheets is a website for students and teachers where teachers can upload files with questions then after uploading the file the teacher answers these questions and then send this file to students -without answers of course- to answer it. There are many ways that can teacher use to solve these questions but the way that matters to me is the teacher can draw rectangles on an image and then write the answer on it.
My Question Is: How I Can draw writable rectangles on the image using javascript?
see the demo for clarity.
Konva js is a nice bet.
This tool allows you create shapes, and save everything to a database so you can reload all drawings to future usage.
Nice try
FINALLY, after a long of searching, I found Fabric.js, here is an example of my code
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);
});