Este es el codigo completo:

archivo : pizarra-online.php

<?php
/**
* Plugin Name: Online Whiteboard Shortcode
* Description: Adds a basic online whiteboard for freehand drawing using the [pizarra_online] shortcode.
* Version: 1.0
* Author: Roberto C. Aleman F.
* License: GPL v3
* Text Domain: pizarra-online
*/

if (!defined('ABSPATH')) {
exit; // Exit if accessed directly
}

// Register Shortcode
function po_registrar_shortcode() {
// Register styles and scripts
wp_register_style('po-pizarra-style', plugins_url('pizarra.css', __FILE__));
wp_register_script('po-pizarra-script', plugins_url('pizarra.js', __FILE__), array(), '1.0', true);

// Buffer HTML output
ob_start();

// Enqueue assets only if the shortcode is active
wp_enqueue_style('po-pizarra-style');
wp_enqueue_script('po-pizarra-script');
?>
<div class="po-pizarra-contenedor">
<canvas id="pizarraOnline" width="800" height="500"></canvas>
<div class="po-pizarra-controles">
<button id="btnLimpiar" class="po-btn"><?php _e('Clear Board', 'pizarra-online'); ?></button>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('pizarra_online', 'po_registrar_shortcode');

archivo: pizarra.css

@charset "utf-8";

.po-pizarra-contenedor {
max-width: 100%;
margin: 20px auto;
text-align: center;
font-family: system-ui, -apple-system, sans-serif;
}

#pizarraOnline {
background-color: #ffffff;
border: 2px solid #333333;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
cursor: crosshair;
display: block;
max-width: 100%;
height: auto;
margin: 0 auto 15px auto;
}

.po-pizarra-controles {
margin-top: 10px;
}

.po-btn {
background-color: #333333;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s ease;
}

.po-btn:hover {
background-color: #555555;
}

archivo: pizarra.js

document.addEventListener("DOMContentLoaded", () => {
const canvas = document.getElementById("pizarraOnline");
if (!canvas) return;

const ctx = canvas.getContext("2d");
const btnLimpiar = document.getElementById("btnLimpiar");

// Stroke setup (Default: Black)
ctx.strokeStyle = "#000000";
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";

let drawing = false;

// Get exact cursor/touch position relative to the canvas
function getPosition(e) {
const rect = canvas.getBoundingClientRect();

// Support for touch events (Mobile) or mouse events (Desktop)
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;

// Scale coordinates in case CSS resizes the canvas
return {
x: (clientX - rect.left) * (canvas.width / rect.width),
y: (clientY - rect.top) * (canvas.height / rect.height)
};
}

function startDrawing(e) {
drawing = true;
const pos = getPosition(e);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
// Prevent page scrolling on mobile devices while drawing
if(e.touches) e.preventDefault();
}

function draw(e) {
if (!drawing) return;
const pos = getPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
if(e.touches) e.preventDefault();
}

function stopDrawing() {
drawing = false;
ctx.closePath();
}

// Mouse Events (Desktop)
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseleave", stopDrawing);

// Touch Events (Mobile / Tablets)
canvas.addEventListener("touchstart", startDrawing, { passive: false });
canvas.addEventListener("touchmove", draw, { passive: false });
canvas.addEventListener("touchend", stopDrawing);

// Clear Board Button Functionality
btnLimpiar.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
});

? What does the whiteboard look like?