Draw On Image In Form

I have created a Layout Based Form and would like to add an image that I can draw on. I want to save the combined image/drawing every time I use that form.

The purpose is to document Botox and Filler injections. The image is of facial muscle and I would like to place dots on the image that represent the injections, to document each procedure.

Is there currently away to do this?

1 Like


There is a form that does something similar named the graphic pain map. You can install it and relabel it for your use. If you are a little techie, you can change the image to a face close up.

1 Like

hi @naya ,
Check out the ’ Image canvas’ data type in the LBF. I think that should get what you are looking for. Looks like it will take an image name in the description (or at least that’s what it looks like in the code at:
openemr/options.inc.php at master · openemr/openemr · GitHub

Thank you both for your replies. Because I would like the drawing/image to be one of several data points, I am going to try using the Image Canvas first. If I can’t get that to work, I will try the using the pain map approach.

Here is the form I have so far.

I looked at the code Brady sent, and added an image to the folder shown below.

I added the image name to the description (see below).

I also tried adding the image to the directory /sites/images, but that didn’t work either.

Can you tell me if I am reading this right?


1 Like

Hi @naya ,

In the Description on the LBF editor, try:


Definitely let us know if this works. If so, then this is a real jewel of a feature that I was not even aware of, so will be good to get it documented somewhere.

This worked perfectly!

Thanks. Would you like me to write it up? If so, can you give me guidelines for the writeup?



hi @naya ,


Just document your steps here (pics are always nice) and then I’ll copy it over to the wiki (I won’t make you learn wiki language especially since we are hoping to migrate to a modern doc engine in hopefully near future).


btw, @sunsetsystems , this is an awesome feature that you added to LBF!

Thanks! And I am very happy to see the documentation effort.

Let me know if this works.

Draw On Image Using Image Canvas in Layout Based Form

  1. Upload your image to the directory

[web root]/openemr/sites/default/images/YourImageName.ext

Note: The options.inc.php file holds the code for this functionality

  1. Create Layout Based Form
  • Data Type: Image Canvas
  • Description: image=YourImageName.extension

  1. Before drawing on image in form

  1. After drawing on image in form

Is there a way to make the Image Canvas larger?

Hi @drkay,

Yes. There is a way to make the canvas larger. As @brady.miller pointed out to me, you can make changes in the Layout gui for size width and height. Your picture is in pixels, so in the example below, I matched the Image Canvas size to the image size in pixels.
You can see I set the size width to 500 and the size height to 750.

My image is 500X700 pixels and here how it looks on the form. You can see there are 50 pixels at the bottom of the form.


Oh, this is great. Thank you!!

Hola, estoy comenzando a utilizar openemr, como hicieron para agregar el cuadro para la imagen y posteriormente agregar la imagen, ingresaron directo al código?

It is explained above:
1 place the image in the openemrdirectory / sites / images directory
2 You create a form LBF Administration -> Layout -> New Layout
3 You create the field where you want to put the image. The Data Type must be Image Canvas, and in description you must place image = TuImagen.extension. In size, you can place the size of the images in pixels.

Esta explicado mas arriba:
1 colocas la imagen en el directorio openemrdirectory/sites/images
2 Creas un formulario LBF Administracion -> diseño -> Nuevo Diseño
3 Creas el campo donde quieres poner la imagen. El Tipo de Dato debe ser Image Canvas, y en descripción debes colocar image=TuImagen.extension. En tamaño, puedes colocar el tamaño de la imágenes en pixeles.


Hola, hice todos los pasos pero sigue sin funcionar, la extensión de la carpeta images es: xampp/htdocs/openemr/sites/default/images
Sabe cuál puede ser el problema?

Hola, al crear el formulario se debe completar algún campo en especial?

Yes, in the form you must place a field where the Data Type is Image Canvas and in the description of the field you must place image=name_of_your_file.jpg (the name of the file you placed in xampp/htdocs/openemr/sites/default/images)

In Spanish:
Si, en el formulario debes colocar un campo donde el Tipo de Datos es Image Canvas y en la descripción del campo debes colocar image=nombre_de_tu_archivo.jpg (el nombre del archivo que colocaste en xampp/htdocs/openemr/sites/default/images)


1 Like

Is there a method to enable loading images to the patient record and using them as a canvas background to draw on?