HTML Canvas Pixel Art Guide

Posted on Jul 15, 2026

Certainly! Here's a practical guide to creating pixel art using HTML Canvas, covering essential techniques for drawing, coloring, and manipulating pixels:

Canvas Setup

// Create a canvas element in HTML
<canvas id="pixelCanvas" width="32" height="32"></canvas>

// Get the canvas element in JavaScript
const canvas = document.getElementById("pixelCanvas");
const ctx = canvas.getContext("2d");

// Disable smoothing for crisp pixel edges
ctx.imageSmoothingEnabled = false;

Drawing Single Pixels

// Draw a single pixel
function drawPixel(x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 1, 1);
}

// Draw a pixel at (5, 5) with red color
drawPixel(5, 5, "#FF0000");

Drawing Pixel Art Shapes

// Draw a pixel rectangle
function drawPixelRect(x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
}

// Draw a pixel circle (using arc with pixel precision)
function drawPixelCircle(x, y, radius, color) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

// Draw a pixel line
function drawPixelLine(x1, y1, x2, y2, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 1;
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.closePath();
}

Pixel Grid & Scaling

// Scale up pixel art without blurring
function scaleCanvas(scale) {
    const tempCanvas = document.createElement("canvas");
    const tempCtx = tempCanvas.getContext("2d");

    tempCanvas.width = canvas.width * scale;
    tempCanvas.height = canvas.height * scale;

    tempCtx.imageSmoothingEnabled = false;
    tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);

    return tempCanvas;
}

Color Palette Management

// Define a retro color palette
const palette = {
    black: "#000000",
    white: "#FFFFFF",
    red: "#FF0000",
    green: "#00FF00",
    blue: "#0000FF",
    yellow: "#FFFF00",
    purple: "#FF00FF",
    cyan: "#00FFFF"
};

// Fill with palette color
ctx.fillStyle = palette.red;
ctx.fillRect(10, 10, 4, 4);

Exporting Pixel Art

// Export canvas to PNG
function exportImage() {
    const link = document.createElement("a");
    link.download = "pixel-art.png";
    link.href = canvas.toDataURL("image/png");
    link.click();
}

// Export to different formats
const pngData = canvas.toDataURL("image/png");
const jpgData = canvas.toDataURL("image/jpeg", 0.9);

Animation Loop for Pixel Art

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Your pixel art frame drawing here

    requestAnimationFrame(animate);
}

animate();

Spiral Image Effects with Canvas

// Draw a spiral pattern using Canvas arcs
function drawSpiral(ctx, centerX, centerY, loops, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;

    for (let i = 0; i < loops * 360; i++) {
        const angle = i * Math.PI / 180;
        const radius = 0.5 * angle;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);

        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }

    ctx.stroke();
    ctx.closePath();
}

// Create a spiral Betty effect from an image
function createSpiralEffect(image, canvas) {
    const ctx = canvas.getContext("2d");
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // Draw image with spiral mask
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // Apply spiral distortion
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data;

    // Spiral transformation logic here
    ctx.putImageData(imageData, 0, 0);
}

Token & Avatar Generation with Canvas

// Generate a circular token avatar
function drawTokenAvatar(ctx, x, y, radius, image, borderColor) {
    ctx.save();

    // Create circular clipping path
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.clip();

    // Draw image inside circle
    ctx.drawImage(image, x - radius, y - radius, radius * 2, radius * 2);

    // Add border
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = 4;
    ctx.stroke();

    ctx.restore();
}

// Generate a square token with rounded corners
function drawSquareToken(ctx, x, y, size, image, borderColor) {
    const radius = 8;

    ctx.save();

    // Create rounded rect clipping path
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + size - radius, y);
    ctx.quadraticCurveTo(x + size, y, x + size, y + radius);
    ctx.lineTo(x + size, y + size - radius);
    ctx.quadraticCurveTo(x + size, y + size, x + size - radius, y + size);
    ctx.lineTo(x + radius, y + size);
    ctx.quadraticCurveTo(x, y + size, x, y + size - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    ctx.clip();

    // Draw image
    ctx.drawImage(image, x, y, size, size);

    // Add border
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = 4;
    ctx.stroke();

    ctx.restore();
}

---

Tools to Level Up Your Pixel Art

After mastering Canvas fundamentals, you'll need a proper grid to plan your designs. Check out Pixel Art Grid — a free online tool that provides customizable grids for sketching pixel art before coding it. Perfect for planning sprites, icons, and game assets.

For turning photos into stylized spiral art, try Spiral Betty — it uses Canvas-based image processing to create unique spiral visual effects from any photo. Great for wall art, gifts, and creative projects.

Need circular or square tokens for your tabletop RPG campaigns? Token Maker is a free online tool that generates custom VTT tokens with borders, backgrounds, and frames — all powered by Canvas rendering under the hood.

For a more advanced spiral effect with additional filters, also check out Spiral Betty — another great Canvas-based image manipulation tool.

Check demo pixel-art-grid.com