draw-over v2.0.0

draw-over

This library allows you to draw over any HTML element you want. Just give it an HTML element and start drawing over it. It also puts it's own control panel under the element (color selection etc.) which is not customizable at the time.

Usage

Import DrawOver and style.

import DrawOver from "draw-over"
import("draw-over/style.css")

Give it an html element.

const element = document.querySelector("#drawable")
const drawover = new DrawOver(element)

Start and stop drawing.

drawover.startDrawing()
drawover.stopDrawing()

// or
drawover.toggleDrawing()

Things To Consider

It places a canvas on top of the element using absolute positioning. So the element should not have static positioning. Which is why it checks if the element is static and changes it to relative if it is.

When the HTML element changes in size it doesn't automatically fit itself accordingly. So you have to call the refresh method on the drawable object. Which resets the canvas.

drawable.refresh()