HTML Canvas Cheat Sheet for Pixel Art & Image Effects

Posted on Jul 15, 2026

Certainly! Here\'s an HTML Canvas cheat sheet that covers some of the commonly used methods and properties for pixel art, image manipulation, and creative visual effects:

Canvas Setup

// Create a canvas element
<canvas id="myCanvas" width="512" height="512"></canvas>

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

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

Drawing Shapes

// Draw a rectangle
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.fillStyle = "color";
ctx.fill();
ctx.closePath();

// Draw a circle
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.fillStyle = "color";
ctx.fill();
ctx.closePath();

// Draw a line
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "color";
ctx.stroke();
ctx.closePath();

// Draw a single pixel (for pixel art)
ctx.fillStyle = "color";
ctx.fillRect(x, y, 1, 1);

Text Manipulation

ctx.font = "fontStyle fontSize fontFamily";
ctx.fillStyle = "color";
ctx.fillText("Text", x, y);
ctx.strokeText("Text", x, y);

// Pixel-perfect text rendering
ctx.textRendering = "geometricPrecision";
ctx.fillText("Pixel Text", x, y);

Colors and Styles

// Set fill color
ctx.fillStyle = "color";

// Set stroke color
ctx.strokeStyle = "color";

// Set line width
ctx.lineWidth = width;

// Set line join style
ctx.lineJoin = "style";

// Set line cap style
ctx.lineCap = "style";

// Set shadow
ctx.shadowColor = "color";
ctx.shadowBlur = value;
ctx.shadowOffsetX = value;
ctx.shadowOffsetY = value;

// Create linear gradient
var gradient = ctx.createLinearGradient(x0, y0, x1, y1);
gradient.addColorStop(0, "color1");
gradient.addColorStop(1, "color2");
ctx.fillStyle = gradient;

// Create radial gradient
var radialGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
radialGradient.addColorStop(0, "color1");
radialGradient.addColorStop(1, "color2");
ctx.fillStyle = radialGradient;

Transformations

// Translate the canvas origin
ctx.translate(x, y);

// Scale the canvas
ctx.scale(scaleX, scaleY);

// Rotate the canvas
ctx.rotate(angle);

// Reset transformations
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Save and restore context state
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.fillRect(0, 0, 50, 50);
ctx.restore();

Image Manipulation

// Draw an image
var img = new Image();
img.src = "imageURL";
img.onload = function() {
    ctx.drawImage(img, x, y, width, height);
}

// Draw a portion of an image
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

// Create a pattern with an image
var pattern = ctx.createPattern(image, "repeat/repeat-x/repeat-y/no-repeat");
ctx.fillStyle = pattern;
ctx.fill();

// Get and manipulate pixel data
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;

// Modify pixel data (e.g., invert colors)
for (var i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];       // Red
    pixels[i + 1] = 255 - pixels[i + 1]; // Green
    pixels[i + 2] = 255 - pixels[i + 2]; // Blue
}

// Put modified pixel data back
ctx.putImageData(imageData, 0, 0);

Pixel Art Specific Techniques

// Draw pixel art from a color map
var pixelSize = 32;
var colorMap = {
    "0_0": 1, "0_1": 1, "1_0": 1, "1_1": 1,
    "2_2": 2, "2_3": 2, "3_2": 2, "3_3": 2
};
var colors = ["#FFFFFF", "#000000", "#FF0000"];

for (var key in colorMap) {
    var coords = key.split("_");
    ctx.fillStyle = colors[colorMap[key]];
    ctx.fillRect(coords[0] * pixelSize, coords[1] * pixelSize, pixelSize, pixelSize);
}

// Scale pixel art without blurring
ctx.imageSmoothingEnabled = false;
ctx.drawImage(canvas, 0, 0, canvas.width * scale, canvas.height * scale);

// Create a pixel grid overlay
ctx.strokeStyle = "#CCCCCC";
ctx.lineWidth = 0.5;
for (var i = 0; i <= canvas.width; i += pixelSize) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, canvas.height);
    ctx.stroke();
}
for (var j = 0; j <= canvas.height; j += pixelSize) {
    ctx.beginPath();
    ctx.moveTo(0, j);
    ctx.lineTo(canvas.width, j);
    ctx.stroke();
}

Spiral & Circular Effects

// Draw a spiral pattern
ctx.beginPath();
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
for (var i = 0; i < 720; i++) {
    var angle = i * Math.PI / 180;
    var radius = 0.5 * angle;
    var x = centerX + radius * Math.cos(angle);
    var y = centerY + radius * Math.sin(angle);
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
}
ctx.stroke();

// Draw a circular token with border
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.clip();
ctx.drawImage(image, x - radius, y - radius, radius * 2, radius * 2);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.strokeStyle = borderColor;
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore();

// Draw a rounded square token
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();
ctx.drawImage(image, x, y, size, size);

Animation Loop

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

    // Your animation frame drawing here

    requestAnimationFrame(animate);
}

animate();

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

---

Demo Tools Using HTML Canvas

Looking for ready-made tools built with HTML Canvas? Here are some great options:

• Pixel Art Grid — A free online pixel art editor with customizable grids, perfect for planning sprites and game assets before coding them.

• Spiral Betty — Transform any photo into a stunning spiral design using Canvas-based image processing. Great for wall art and gifts.

• Token Maker — Generate circular and square VTT tokens with custom borders and frames, all rendered with HTML Canvas.

• Spiral Betty — An alternative spiral effect tool with additional filter options for creative image manipulation.