Skip to content
Advertisement

How to draw writable rectangles on images using JS

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.

Advertisement

Answer

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);
});
Advertisement