Cómo crear un pequeño bloc de dibujo para Blogger

En este tutorial vamos a crear un pequeño lienzo donde los visitantes podrán dibujar directamente desde el navegador. El gadget está inspirado en el clásico Paint, con una estética retro y sencilla, pero adaptada para combinar con un blog de estilo cálido y creativo.

Incluye:

• Un lienzo para dibujar.

• Una paleta de colores desplegable.

• Un control para cambiar el grosor del pincel.

• Un botón para borrar el dibujo.

• Un botón para guardar la ilustración en formato PNG.

• Compatibilidad con mouse y pantallas táctiles.

Antes de empezar

Este gadget está creado utilizando HTML, CSS y JavaScript.

Cada parte tiene una función diferente:

• HTML → crea la ventana, los botones y el lienzo.
• CSS → da el aspecto de una pequeña aplicación retro.
• JavaScript → permite dibujar, cambiar colores, borrar el lienzo y guardar el resultado.

Aunque el código parece largo, la mayor parte corresponde a pequeñas funciones independientes, por lo que es más fácil de entender de lo que parece.

Paso 1: Crear la ventana del dibujo

Toda la aplicación está contenida dentro de:
```html
<div id="igariPaint">
```
Este bloque actúa como el marco principal.
Su apariencia se controla aquí:
```css
#igariPaint{
    max-width:360px;
    border:2px solid #444;
    background:#d4d0c8;
}
```
Puedes modificar:

• el ancho

• el color del fondo

• el borde

• la sombra

Por ejemplo, un lienzo más ancho:
```css
max-width:450px;
```

Paso 2: Personalizar la barra superior

La parte superior está creada mediante:
```html
<div id="paintTitle">
```
Actualmente muestra:
```html
🍓 Dibuja
```
Puedes cambiarlo por cualquier título.
Algunas ideas:
```html
☕ Mi pequeño cuaderno
```
```html
🌸 Dibuja aquí
```
```html
✏️ Sketchbook
```
Incluso puedes sustituir los iconos finales por otros si prefieres un estilo diferente.

Paso 3: Entender el lienzo

El espacio donde realmente se dibuja es:
```html
<canvas id="paintCanvas"></canvas>
```

El elemento canvas funciona como una hoja en blanco.

Todo lo que el usuario dibuja ocurre dentro de este espacio.

Su tamaño se adapta automáticamente al ancho del gadget gracias a esta función:

```javascript
function resizeCanvas()
```

Esto evita que el lienzo se deforme al cambiar el tamaño de la ventana del navegador.

Paso 4: Cambiar la paleta de colores

Cada color está representado por un pequeño bloque:

```html
<div class="color"
style="background:#000"
onclick="setColor('#000')">
</div>
```

Para añadir un nuevo color basta con copiar uno de estos bloques y cambiar el código hexadecimal.

Ejemplo:

```html
background:#f8d7da
```

Puedes crear una paleta adaptada a tu blog con:

• 🌸 rosas
• verdes
• marrones
• azules suaves
• amarillos cálidos

Paso 5: Cambiar el grosor del pincel

El control deslizante es:

```html
<input
type="range"
id="size"
min="1"
max="18"
value="3">
```

Puedes modificar:

• el grosor mínimo
• el máximo
• el tamaño inicial

Por ejemplo:

```html
min="2"
max="30"
value="5"
```

permitirá hacer trazos mucho más gruesos.

Paso 6: Mostrar u ocultar la paleta

El botón:

```javascript
function togglePalette()
```
permite abrir y cerrar la paleta de colores.

Así el gadget ocupa menos espacio cuando no se está utilizando.

Puedes cambiar el texto del botón:

```html
🎨 Paleta
```
por algo como:
```html
🌈 Colores
```
o
```html
🖍 Elegir color
```

Paso 7: Cómo funciona el dibujo

El gadget detecta cuándo el usuario mantiene presionado el mouse (o el dedo en dispositivos táctiles).

Mientras esto ocurre:

```javascript
drawing = true;
```

Cada movimiento genera una línea entre la posición anterior y la nueva.

El color utilizado depende de:

```javascript
x.strokeStyle = color;
```

Y el grosor del trazo se obtiene desde:

```javascript
document.getElementById("size").value;
```

Esto hace que el dibujo sea completamente fluido.

Paso 8: Borrar el lienzo

El botón Clear ejecuta:

```javascript
function clearCanvas()
```

Esta función limpia completamente el dibujo sin necesidad de recargar la página.

Si prefieres un botón en español puedes cambiar:

```html
Clear
```
por

```html
Borrar
```

Paso 9: Guardar el dibujo

El botón Save utiliza:

```javascript
function saveCanvas()
```

Esta función convierte el dibujo en una imagen PNG y la descarga automáticamente.

El nombre del archivo puede modificarse aquí:

```javascript
a.download="igari-paint.png";
```
Por ejemplo:

```javascript
a.download="mi-dibujo.png";
```

Paso 10: Instalarlo en Blogger

1. Entra al panel de Blogger.
2. Ve a Diseño.
3. Selecciona Añadir un gadget.
4. Elige HTML/Javascript.
5. Pega el código completo.
6. Guarda los cambios.

El pequeño bloc de dibujo aparecerá en la zona donde hayas colocado el gadget.

Personalizaciones bonitas

Cambiar los colores del programa

Busca:

```css
background:#d4d0c8;
```

Puedes sustituirlo por colores que combinen con tu blog.

Cambiar el color de la barra superior

Busca:

```css
background:#8f1d1d;
```

Puedes usar cualquier otro tono.

Por ejemplo:

• verde oliva
• rosa antiguo
• marrón café
• azul grisáceo

Cambiar la sombra

Busca:

```css
box-shadow:4px 4px 0 #777;
```
Una sombra más suave dará un aspecto más moderno.

Cambiar la forma de los colores

Puedes aumentar:

```css
width:25px;
height:25px;
```

para crear una paleta más cómoda de utilizar.

Ideas para usar este gadget

Este pequeño Paint puede convertirse en:

• ✏️ un rincón para hacer garabatos
• 🌸 una libreta creativa
• ☕ un espacio para relajarse
• 📖 un bloc para practicar caligrafía
• 🎨 una zona infantil dentro del blog
• 🍃 una pequeña pausa entre lecturas

También puedes adaptar la paleta de colores según la estación del año o la temática de tu blog.

La historia detrás del gadget

Hay algo especial en los programas sencillos con los que muchas personas empezaron a dibujar. Este gadget nació como un pequeño homenaje a esos momentos en los que abrir Paint era suficiente para pasar un buen rato creando sin preocuparse por el resultado. No busca ser una herramienta profesional, sino recuperar esa sensación de experimentar, probar colores y llenar un espacio en blanco por pura curiosidad.
A veces, un pequeño dibujo improvisado también puede convertirse en un recuerdo de la visita a un blog.

Código

<style>

#igariPaint{

    width:100%;

    max-width:360px;

    margin:auto;

    border:2px solid #444;

    background:#d4d0c8;

    font-family:Tahoma,Arial,sans-serif;

    box-shadow:4px 4px 0 #777;

    overflow:hidden;

}

/* HEADER */

#paintTitle{

    background:#8f1d1d;

    color:#fff;

    padding:3px 6px;

    display:flex;

    justify-content:space-between;

    font-size:12px;

    font-weight:bold;

}

/* MENU */

#paintMenu{

    background:#ece9d8;

    padding:3px 6px;

    font-size:11px;

    border-bottom:2px solid #999;

    display:flex;

    justify-content:space-between;

}

/* CANVAS */

#canvasWrap{

    width:100%;

    position:relative;

    padding-top:100%;

    overflow:hidden;

}

#paintCanvas{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:block;

    background:#fff;

    cursor:crosshair;

    touch-action:none;

    box-shadow: inset 0 0 0 1px #bbb;

}

/* TOOLBAR */

#toolbar{

    background:#d8c2b8 !important;

    padding:6px;

    text-align:center;

}

/* PALETA */

#palette{

    display:none;

    text-align:center;

    margin-bottom:6px;

}

.palette-row{

    display:block;

    margin:2px 0;

}

/* 🎨 COLORES REALMENTE MÁS GRANDES (VISIBLE EN BLOGGER) */

.color{

    width:25px !important;

    height:25px !important;

    display:inline-block;

    margin:1px;

    border:1px solid #555;

    box-shadow:

        inset 1px 1px #fff,

        inset -1px -1px #888;

    cursor:pointer;

}

/* 🎚️ SLIDER REALMENTE VISIBLE */

#size{

    width:120px;

    display:block;

    margin:6px auto;

    accent-color:#8f1d1d;

    background:#f2eee8 !important;

    border:1px solid #b8b0a8;

    border-radius:10px;

    height:10px;

}

#togglePalette{

    display:block;

    margin:4px auto 0;

}

</style>

<div id="igariPaint">

<div id="paintTitle">

<div>🍓 Dibuja</div>

<div>▁ □ ✕</div>

</div>

<div id="paintMenu">

<button onclick="clearCanvas()">Clear</button>

<button onclick="saveCanvas()">Save</button>

</div>

<div id="canvasWrap">

<canvas id="paintCanvas"></canvas>

</div>

<div id="toolbar">

<div id="palette">

<div class="palette-row">

<div class="color" style="background:#000" onclick="setColor('#000')"></div>

<div class="color" style="background:#2b2b2b" onclick="setColor('#2b2b2b')"></div>

<div class="color" style="background:#fff" onclick="setColor('#fff')"></div>

<div class="color" style="background:#b42c2c" onclick="setColor('#b42c2c')"></div>

</div>

<div class="palette-row">

<div class="color" style="background:#d46a6a" onclick="setColor('#d46a6a')"></div>

<div class="color" style="background:#f2b6b6" onclick="setColor('#f2b6b6')"></div>

<div class="color" style="background:#6b8f6b" onclick="setColor('#6b8f6b')"></div>

<div class="color" style="background:#9fbf9f" onclick="setColor('#9fbf9f')"></div>

</div>

<div class="palette-row">

<div class="color" style="background:#cfe3cf" onclick="setColor('#cfe3cf')"></div>

<div class="color" style="background:#6f8fbf" onclick="setColor('#6f8fbf')"></div>

<div class="color" style="background:#9fbbe0" onclick="setColor('#9fbbe0')"></div>

<div class="color" style="background:#d6e6ff" onclick="setColor('#d6e6ff')"></div>

</div>

</div>

<input type="range" id="size" min="1" max="18" value="3" />

<button id="togglePalette" onclick="togglePalette()">🎨 Paleta</button>

</div>

</div>

<script>

const c=document.getElementById("paintCanvas");

const x=c.getContext("2d");

function resizeCanvas(){

    c.width=c.offsetWidth;

    c.height=c.offsetHeight;

    x.lineCap="round";

    x.lineJoin="round";

}

window.addEventListener("resize",resizeCanvas);

resizeCanvas();

let drawing=false,color="#000",lx=0,ly=0;

function setColor(v){color=v;}

function togglePalette(){

    const p=document.getElementById("palette");

    p.style.display = (p.style.display==="block") ? "none" : "block";

}

/* CURSOR FIX */

function pos(e){

const rect=c.getBoundingClientRect();

const clientX = e.touches ? e.touches[0].clientX : e.clientX;

const clientY = e.touches ? e.touches[0].clientY : e.clientY;

return {

    x:(clientX-rect.left)*(c.width/rect.width),

    y:(clientY-rect.top)*(c.height/rect.height)

};

}

c.onmousedown=e=>{drawing=true;let p=pos(e);lx=p.x;ly=p.y};

c.onmouseup=()=>drawing=false;

c.onmouseleave=()=>drawing=false;

c.onmousemove=e=>{

if(!drawing)return;

let p=pos(e);

x.strokeStyle=color;

x.lineWidth=document.getElementById("size").value;

x.beginPath();

x.moveTo(lx,ly);

x.lineTo(p.x,p.y);

x.stroke();

lx=p.x;ly=p.y;

};

c.addEventListener("touchstart",e=>{

drawing=true;let p=pos(e);lx=p.x;ly=p.y;

});

c.addEventListener("touchmove",e=>{

e.preventDefault();

if(!drawing)return;

let p=pos(e);

x.strokeStyle=color;

x.lineWidth=document.getElementById("size").value;

x.beginPath();

x.moveTo(lx,ly);

x.lineTo(p.x,p.y);

x.stroke();

lx=p.x;ly=p.y;

},{passive:false});

c.addEventListener("touchend",()=>drawing=false);

function clearCanvas(){

x.clearRect(0,0,c.width,c.height);

}

function saveCanvas(){

let a=document.createElement("a");

a.href=c.toDataURL("image/png");

a.download="igari-paint.png";

a.click();

}

</script>

🍵 Hasta el próximo rincón creativo.
— Mañanas Lentas 🌙