Add drawing modal [All versions]

Versions: All versions
Description: With this tutorial you will be able to add to your forum a drawing modal for your users so that they can enjoy some kind of interraction and fun! They can choose to draw with 4 different colors: black (default), red, green and blue. They can clearn the canvas, they can undo and they can save the image (jpg) locally and then upload to your forum! An example:



Go to AP > Display > Pictures and Colors > Colors & CSS > CSS Stylesheet and paste this:

Code:

 .modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
  }
  .modal-content {
    background-color: #f0f0f0;
    margin: 10% auto;
    padding: 20px;
    width: 600px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  }
  .close {
    float: right;
    font-size: 24px;
    cursor: pointer;
  }
  .toolbox {
    margin: 10px 0;
  }
  .color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
    margin-right: 10px;
    cursor: pointer;
  }
  .action-buttons button {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
  }
  .action-buttons button:hover {
    background-color: #218838;
  }
  #undoCanvas {
    background-color: #ffc107;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
  }

  .open-modal-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #007bff;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .open-modal-btn:hover {
    background-color: #0056b3;
    transform: scale(1.1);
  }

  /* SVG Styling */
  .open-modal-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
  }

Go to Modal > HTML & javascript > javascript managament and make a new script (click on Create a new script).
Check "In all the pages" and name script: "Drawing modal"

Paste this code:

Code:

document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('drawingModal');
    var openBtn = document.getElementById('openDrawingModal');
    var closeBtn = document.querySelector('.close');
    var canvas = document.getElementById('drawingCanvas');
    var context = canvas.getContext('2d');
    var isDrawing = false;
    var drawingColor = 'black'; // Default color
    var drawingHistory = []; // Array to store drawing states for undo

    // Open the modal when the button is clicked
    openBtn.addEventListener('click', function() {
        modal.style.display = 'block';
    });

    // Close the modal when the 'X' is clicked
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });

    // Close modal when clicking outside of modal content
    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });

    // Drawing logic
    canvas.addEventListener('mousedown', function(e) {
        isDrawing = true;
        context.beginPath();
        context.moveTo(e.offsetX, e.offsetY);

        // Save the current canvas state to the history array
        drawingHistory.push(context.getImageData(0, 0, canvas.width, canvas.height));
    });

    canvas.addEventListener('mousemove', function(e) {
        if (isDrawing) {
            context.strokeStyle = drawingColor;
            context.lineWidth = 2;
            context.lineTo(e.offsetX, e.offsetY);
            context.stroke();
        }
    });

    canvas.addEventListener('mouseup', function() {
        isDrawing = false;
        context.beginPath();
    });

    // Clear canvas
    document.getElementById('clearCanvas').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    });

    // Color picker
    var colorButtons = document.querySelectorAll('.color-btn');
    colorButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            drawingColor = this.getAttribute('data-color');
        });
    });

    // Undo functionality
    document.getElementById('undoCanvas').addEventListener('click', function() {
        if (drawingHistory.length > 0) {
            var lastState = drawingHistory.pop(); // Get the last saved state
            context.putImageData(lastState, 0, 0); // Restore the canvas to the previous state
        }
    });

    // Save canvas as JPG
    document.getElementById('saveCanvas').addEventListener('click', function() {
        // Create a temporary canvas to merge background color with the drawing
        var tempCanvas = document.createElement('canvas');
        var tempContext = tempCanvas.getContext('2d');
        tempCanvas.width = canvas.width;
        tempCanvas.height = canvas.height;

        // Fill the background with white
        tempContext.fillStyle = 'white';
        tempContext.fillRect(0, 0, tempCanvas.width, tempCanvas.height);

        // Draw the current canvas on top of the white background
        tempContext.drawImage(canvas, 0, 0);

        // Save as JPG
        var image = tempCanvas.toDataURL('image/jpeg', 1.0); // Get image as JPG
        var link = document.createElement('a');
        link.href = image;
        link.download = 'drawing.jpg'; // File name for download
        link.click();
    });
});

HTML position depending on the forum version.
Go to Display > Templates > General > overall_header (click on the right gear).

You will paste this code for all versions but on different place:

Code:

<button type="button" id="openDrawingModal" class="open-modal-btn">
    <!-- Inline SVG for pencil icon -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="white">
        <path d="M12.3 2.3c.4-.4 1-.4 1.4 0l8 8c.4.4.4 1 0 1.4l-11 11c-.2.2-.4.3-.7.3h-8c-.6 0-1-.4-1-1v-8c0-.3.1-.5.3-.7l11-11zm2.1 2.1L4 14.8V19h4.2L18.4 8.8 14.4 4.4zm2.8 3.8l-1.4-1.4 1.4-1.4L19.5 9 17.2 10.9l-1.4-1.4 1.4-1.4 1.4 1.4-1.4 1.4zm-10 11.1v1h-2v-1h2z"/>
    </svg>
</button>

  <!-- Modal structure -->
<div id="drawingModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
   
    <h2>Draw Your Image</h2>
   
    <canvas id="drawingCanvas" width="500" height="300" style="border:2px solid #555; background-color: #fff;"></canvas>
   
    <!-- Color Picker -->
    <div class="toolbox">
      <button class="color-btn" data-color="black" style="background-color: black;"></button>
      <button class="color-btn" data-color="red" style="background-color: red;"></button>
      <button class="color-btn" data-color="green" style="background-color: green;"></button>
      <button class="color-btn" data-color="blue" style="background-color: blue;"></button>
      <button id="undoCanvas">Undo</button>
    </div>
   
    <br>
   
    <!-- Action Buttons -->
    <div class="action-buttons">
      <button id="clearCanvas">Clear</button>
      <button id="saveCanvas">Save as JPG</button>
    </div>
  </div>
</div>

phpBB2, phpBB3
Locate

Code: <body id="phpbb">

and post code above bellow it.

punBB, Invision
Locate

Code: <body>

and post code above bellow it.

ModernBB
Locate

Code: <body id="modernbb">

and post code above bellow it.

AwesomeBB
Locate

Code: <body id="top">

and post code above bellow it.

Save and publish template.

If you have any question, pls open up a new topic and we will toubleshoot it. If you have suggestions for the code, post in this topic.

hello

thank you for posting the code
but for me its just an elementary children's panel with 4 drawing lines... to do what write your name?
what is the point of adding all these codes since you can easily add to your forum an online photo editor like Pixlr using just an iframe code

note: the example image you posted is showing as invalid

skouliki wrote:hello

thank you for posting the code
but for me its just an elementary children's panel with 4 drawing lines... to do what write your name?
what is the point of adding all these codes since you can easily add to your forum an online photo editor like Pixlr using just an iframe code

note: the example image you posted is showing as invalid

Hello. I've edited the invalid image.
The idea is to have the feature on the forum itself if for whatever reason the admin needs it (for his members). Not many people know how to locate these type of features online (websites) or to use apps like gimp/paint and then save image and then upload it. It's a procedure. This one is greatly minimized in terms of what it can do, but once more, in case somebody needs it, why not?

Edit: Why don't you suggest what else it should have so that I might be able to improve?

Thank you for posting the code
Fun addition

كونان2000 wrote:Thank you for posting the code
Fun addition

You are very welcome, 2000.