Create a Doodle Scribble Screen For Squarespace Websites

Step-by-Step Guide: Adding a Scribble Screen to Your Squarespace Website

Transform your Squarespace site with an engaging, interactive feature: a custom scribble screen that allows users to draw on a dedicated doodle canvas on a Sqaurespace web page. This guide will walk you through setting up a web page marker type canvas using HTML, CSS, and JavaScript.

With this fun feature you’ll provide visitors with an engaging and creative way to interact with your website content, and all it takes is a few simple Squarespace CSS codes, and Javascript which I have prepared for you.

This scribble screen plugin will work for both desktop and mobile screens.

Ready to go? Let’s dive into the guide:

Step 1: Adding HTML for the Canvas

1. Navigate to the page on your Squarespace site where you want to add the scribble feature.

2. Add a Code Block and paste the following HTML code:

---

<div id="scribble-canvas-container">

<canvas id="scribble-canvas"></canvas>

</div>

---

Step 2: Adding JavaScript for Drawing Functionality

Add the following JavaScript to your code injection header or you can add it within the same Code Block as the HTML above if you prefer. This code enables drawing on the canvas with a custom color thickness of the scribble feature. This code also includes mobile touch support.

Copy the code below into you code injection header area. Go to Website > Pages > Website Tools > Code Injection.

Note the ‘pen color’ and the thickness in green below. Change these to suit your preferences.

---

<script>

document.addEventListener("DOMContentLoaded", function() {

const canvas = document.getElementById("scribble-canvas");

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

// Set a pointer cursor for the canvas

canvas.style.cursor = 'pointer';

// Function to resize and scale the canvas

function resizeCanvas() {

// Set canvas width and height to match the container's actual pixel size

canvas.width = canvas.parentElement.offsetWidth;

canvas.height = canvas.parentElement.offsetHeight;

// Set pen color and thickness

ctx.strokeStyle = "#000"; // Pen color

ctx.lineWidth = 11; // Pen thickness

ctx.lineCap = "round"; // Smooth pen lines

}

// Initial canvas setup

resizeCanvas();

let drawing = false;

// Helper function to get the correct position

function getCanvasPosition(e) {

const rect = canvas.getBoundingClientRect();

const x = (e.clientX || e.touches[0].clientX) - rect.left;

const y = (e.clientY || e.touches[0].clientY) - rect.top;

return { x, y };

}

// Start drawing

function startDrawing(e) {

e.preventDefault(); // Prevent scrolling while drawing

drawing = true;

const pos = getCanvasPosition(e);

ctx.moveTo(pos.x, pos.y);

}

// End drawing

function endDrawing() {

drawing = false;

ctx.beginPath();

}

// Drawing function

function draw(e) {

if (!drawing) return;

e.preventDefault(); // Prevent scrolling while drawing

const pos = getCanvasPosition(e);

ctx.lineTo(pos.x, pos.y);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(pos.x, pos.y);

}

// Mouse events

canvas.addEventListener("mousedown", startDrawing);

canvas.addEventListener("mouseup", endDrawing);

canvas.addEventListener("mousemove", draw);

// Touch events for mobile support

canvas.addEventListener("touchstart", startDrawing);

canvas.addEventListener("touchend", endDrawing);

canvas.addEventListener("touchmove", draw);

// Resize and scale canvas when window resizes

window.addEventListener("resize", resizeCanvas);

});

</script>

---

Step 3: Adding CSS for Styling and Drop Shadow

To style the canvas, including a background color and drop shadow, add the following CSS to the Custom CSS section in your Squarespace settings. Got to Website > Pages > Website Tools (at the bottom) Then ‘custom CSS’.

---

/* Scribble Canvas Styling */

#scribble-canvas-container {

position: relative;

width: 100%;

height: 600px; /* Adjust height as needed */

background-color: #FDF0EE; /* Background color */

overflow: hidden;

cursor: pointer;

box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Drop shadow effect */

border-radius: 8px; /* Optional rounded corners */

}

#scribble-canvas {

width: 100%;

height: 100%;

}

---

By setting up a scribble screen on your Squarespace site, you’re adding an innovative, user-friendly web page marker that enhances visitor engagement. This doodle canvas feature provides a unique interactive experience that’s sure to grab your audience and keep them on your website for longer! With these Squarespace CSS codes and simple customization options, you’ve got the tools to go that extra step in terms of design by creating a tool thats fun for users on all devices!

Did I help you create something extra special? Feel free to buy me a coffee as thanks 😁

---