Sticker Shape JavaScript - Animals & Objects

20 new shape functions featuring animals, houses, cars, and more. Click the copy button to use any shape.

21. Cat Face 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Head
    ctx.arc(width * 0.5, height * 0.5, height * 0.4, 0, Math.PI * 2);
    
    // Ears
    ctx.moveTo(width * 0.3, height * 0.3);
    ctx.lineTo(width * 0.2, height * 0.1);
    ctx.lineTo(width * 0.4, height * 0.25);
    
    ctx.moveTo(width * 0.7, height * 0.3);
    ctx.lineTo(width * 0.8, height * 0.1);
    ctx.lineTo(width * 0.6, height * 0.25);
}

A cute cat face with pointy ears.

22. Dog Face 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Head
    ctx.arc(width * 0.5, height * 0.5, height * 0.4, 0, Math.PI * 2);
    
    // Ears
    ctx.moveTo(width * 0.3, height * 0.3);
    ctx.lineTo(width * 0.2, height * 0.2);
    ctx.lineTo(width * 0.25, height * 0.4);
    
    ctx.moveTo(width * 0.7, height * 0.3);
    ctx.lineTo(width * 0.8, height * 0.2);
    ctx.lineTo(width * 0.75, height * 0.4);
}

A friendly dog face with floppy ears.

23. Fish Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Body
    ctx.moveTo(width * 0.3, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.5, height * 0.2,
        width * 0.7, height * 0.2,
        width * 0.8, height * 0.5
    );
    ctx.bezierCurveTo(
        width * 0.7, height * 0.8,
        width * 0.5, height * 0.8,
        width * 0.3, height * 0.5
    );
    
    // Tail
    ctx.moveTo(width * 0.3, height * 0.5);
    ctx.lineTo(width * 0.1, height * 0.3);
    ctx.lineTo(width * 0.1, height * 0.7);
    ctx.closePath();
}

A simple fish shape with tail fin.

24. Butterfly Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Body
    ctx.moveTo(width * 0.5, height * 0.2);
    ctx.lineTo(width * 0.5, height * 0.8);
    
    // Upper wings
    ctx.moveTo(width * 0.5, height * 0.3);
    ctx.bezierCurveTo(
        width * 0.2, height * 0.2,
        width * 0.1, height * 0.4,
        width * 0.5, height * 0.5
    );
    ctx.moveTo(width * 0.5, height * 0.3);
    ctx.bezierCurveTo(
        width * 0.8, height * 0.2,
        width * 0.9, height * 0.4,
        width * 0.5, height * 0.5
    );
    
    // Lower wings
    ctx.moveTo(width * 0.5, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.2, height * 0.7,
        width * 0.3, height * 0.9,
        width * 0.5, height * 0.7
    );
    ctx.moveTo(width * 0.5, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.8, height * 0.7,
        width * 0.7, height * 0.9,
        width * 0.5, height * 0.7
    );
}

A butterfly with detailed wings.

25. Bird Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Body
    ctx.arc(width * 0.4, height * 0.5, height * 0.3, 0, Math.PI * 2);
    
    // Head
    ctx.arc(width * 0.4, height * 0.3, height * 0.15, 0, Math.PI * 2);
    
    // Beak
    ctx.moveTo(width * 0.4, height * 0.3);
    ctx.lineTo(width * 0.25, height * 0.25);
    ctx.lineTo(width * 0.4, height * 0.35);
    
    // Wing
    ctx.moveTo(width * 0.4, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.6, height * 0.4,
        width * 0.7, height * 0.6,
        width * 0.4, height * 0.7
    );
    
    // Tail
    ctx.moveTo(width * 0.1, height * 0.5);
    ctx.lineTo(width * 0.4, height * 0.55);
    ctx.lineTo(width * 0.1, height * 0.6);
}

A simple bird in flight.

26. House Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Base
    ctx.moveTo(width * 0.2, height * 0.6);
    ctx.lineTo(width * 0.2, height * 0.9);
    ctx.lineTo(width * 0.8, height * 0.9);
    ctx.lineTo(width * 0.8, height * 0.6);
    
    // Roof
    ctx.lineTo(width * 0.5, height * 0.2);
    ctx.closePath();
    
    // Door
    ctx.moveTo(width * 0.4, height * 0.9);
    ctx.lineTo(width * 0.4, height * 0.7);
    ctx.lineTo(width * 0.6, height * 0.7);
    ctx.lineTo(width * 0.6, height * 0.9);
}

A simple house with a triangular roof.

27. Castle Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Base
    ctx.moveTo(width * 0.1, height * 0.7);
    ctx.lineTo(width * 0.1, height * 0.9);
    ctx.lineTo(width * 0.9, height * 0.9);
    ctx.lineTo(width * 0.9, height * 0.7);
    
    // Towers
    ctx.lineTo(width * 0.8, height * 0.4);
    ctx.lineTo(width * 0.7, height * 0.7);
    ctx.lineTo(width * 0.6, height * 0.4);
    ctx.lineTo(width * 0.5, height * 0.7);
    ctx.lineTo(width * 0.4, height * 0.4);
    ctx.lineTo(width * 0.3, height * 0.7);
    ctx.lineTo(width * 0.2, height * 0.4);
    ctx.lineTo(width * 0.1, height * 0.7);
}

A castle with multiple towers.

28. Tree Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Trunk
    ctx.moveTo(width * 0.45, height * 0.7);
    ctx.lineTo(width * 0.45, height * 0.9);
    ctx.lineTo(width * 0.55, height * 0.9);
    ctx.lineTo(width * 0.55, height * 0.7);
    
    // Foliage
    ctx.moveTo(width * 0.2, height * 0.7);
    ctx.bezierCurveTo(
        width * 0.3, height * 0.3,
        width * 0.7, height * 0.3,
        width * 0.8, height * 0.7
    );
    ctx.bezierCurveTo(
        width * 0.7, height * 0.5,
        width * 0.3, height * 0.5,
        width * 0.2, height * 0.7
    );
}

A tree with a trunk and leafy top.

29. Car Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Car body
    ctx.moveTo(width * 0.2, height * 0.6);
    ctx.lineTo(width * 0.2, height * 0.8);
    ctx.lineTo(width * 0.8, height * 0.8);
    ctx.lineTo(width * 0.8, height * 0.6);
    ctx.bezierCurveTo(
        width * 0.8, height * 0.4,
        width * 0.2, height * 0.4,
        width * 0.2, height * 0.6
    );
    
    // Windows
    ctx.moveTo(width * 0.3, height * 0.5);
    ctx.lineTo(width * 0.4, height * 0.5);
    ctx.lineTo(width * 0.4, height * 0.6);
    ctx.lineTo(width * 0.3, height * 0.6);
    
    ctx.moveTo(width * 0.6, height * 0.5);
    ctx.lineTo(width * 0.7, height * 0.5);
    ctx.lineTo(width * 0.7, height * 0.6);
    ctx.lineTo(width * 0.6, height * 0.6);
    
    // Wheels
    ctx.moveTo(width * 0.3, height * 0.8);
    ctx.arc(width * 0.3, height * 0.8, height * 0.1, 0, Math.PI * 2);
    ctx.moveTo(width * 0.7, height * 0.8);
    ctx.arc(width * 0.7, height * 0.8, height * 0.1, 0, Math.PI * 2);
}

A simple car with wheels and windows.

30. Rocket Ship 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Body
    ctx.moveTo(width * 0.4, height * 0.8);
    ctx.lineTo(width * 0.4, height * 0.3);
    ctx.lineTo(width * 0.5, height * 0.1);
    ctx.lineTo(width * 0.6, height * 0.3);
    ctx.lineTo(width * 0.6, height * 0.8);
    
    // Fins
    ctx.moveTo(width * 0.4, height * 0.6);
    ctx.lineTo(width * 0.2, height * 0.8);
    ctx.lineTo(width * 0.4, height * 0.8);
    
    ctx.moveTo(width * 0.6, height * 0.6);
    ctx.lineTo(width * 0.8, height * 0.8);
    ctx.lineTo(width * 0.6, height * 0.8);
    
    // Window
    ctx.moveTo(width * 0.45, height * 0.5);
    ctx.arc(width * 0.5, height * 0.5, height * 0.05, 0, Math.PI * 2);
}

A rocket ship with fins and window.

31. Sailboat 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Hull
    ctx.moveTo(width * 0.2, height * 0.7);
    ctx.lineTo(width * 0.8, height * 0.7);
    ctx.lineTo(width * 0.7, height * 0.9);
    ctx.lineTo(width * 0.3, height * 0.9);
    ctx.closePath();
    
    // Sail
    ctx.moveTo(width * 0.5, height * 0.7);
    ctx.lineTo(width * 0.5, height * 0.2);
    ctx.lineTo(width * 0.7, height * 0.5);
    ctx.closePath();
    
    // Mast
    ctx.moveTo(width * 0.5, height * 0.2);
    ctx.lineTo(width * 0.5, height * 0.7);
}

A simple sailboat with hull and sail.

32. Heart with Arrow 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Heart
    ctx.moveTo(width * 0.5, height * 0.9);
    ctx.bezierCurveTo(
        width * 0.5, height * 0.7,
        width * 0.9, height * 0.5,
        width * 0.5, height * 0.1
    );
    ctx.bezierCurveTo(
        width * 0.1, height * 0.5,
        width * 0.5, height * 0.7,
        width * 0.5, height * 0.9
    );
    
    // Arrow
    ctx.moveTo(width * 0.1, height * 0.3);
    ctx.lineTo(width * 0.5, height * 0.5);
    ctx.lineTo(width * 0.3, height * 0.4);
    ctx.lineTo(width * 0.3, height * 0.6);
    ctx.lineTo(width * 0.5, height * 0.5);
}

A heart pierced by an arrow.

33. Cupcake 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Base
    ctx.moveTo(width * 0.3, height * 0.7);
    ctx.lineTo(width * 0.3, height * 0.9);
    ctx.lineTo(width * 0.7, height * 0.9);
    ctx.lineTo(width * 0.7, height * 0.7);
    
    // Frosting
    ctx.moveTo(width * 0.3, height * 0.7);
    ctx.bezierCurveTo(
        width * 0.4, height * 0.5,
        width * 0.6, height * 0.5,
        width * 0.7, height * 0.7
    );
    
    // Cherry
    ctx.moveTo(width * 0.5, height * 0.5);
    ctx.arc(width * 0.5, height * 0.4, height * 0.05, 0, Math.PI * 2);
}

A delicious cupcake with frosting and cherry.

34. Ice Cream Cone 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Cone
    ctx.moveTo(width * 0.4, height * 0.7);
    ctx.lineTo(width * 0.5, height * 0.9);
    ctx.lineTo(width * 0.6, height * 0.7);
    ctx.closePath();
    
    // Ice cream
    ctx.moveTo(width * 0.4, height * 0.7);
    ctx.bezierCurveTo(
        width * 0.4, height * 0.5,
        width * 0.6, height * 0.5,
        width * 0.6, height * 0.7
    );
}

An ice cream cone with a scoop.

35. Balloon 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Balloon
    ctx.moveTo(width * 0.5, height * 0.8);
    ctx.bezierCurveTo(
        width * 0.3, height * 0.6,
        width * 0.3, height * 0.3,
        width * 0.5, height * 0.2
    );
    ctx.bezierCurveTo(
        width * 0.7, height * 0.3,
        width * 0.7, height * 0.6,
        width * 0.5, height * 0.8
    );
    
    // String
    ctx.moveTo(width * 0.5, height * 0.8);
    ctx.lineTo(width * 0.5, height * 0.9);
}

A simple balloon with a string.

36. Gift Box 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Box
    ctx.moveTo(width * 0.3, height * 0.4);
    ctx.lineTo(width * 0.3, height * 0.8);
    ctx.lineTo(width * 0.7, height * 0.8);
    ctx.lineTo(width * 0.7, height * 0.4);
    ctx.closePath();
    
    // Lid
    ctx.moveTo(width * 0.3, height * 0.4);
    ctx.lineTo(width * 0.2, height * 0.3);
    ctx.lineTo(width * 0.6, height * 0.3);
    ctx.lineTo(width * 0.7, height * 0.4);
    
    // Ribbon
    ctx.moveTo(width * 0.5, height * 0.3);
    ctx.lineTo(width * 0.5, height * 0.8);
    
    ctx.moveTo(width * 0.2, height * 0.55);
    ctx.lineTo(width * 0.8, height * 0.55);
}

A wrapped gift box with ribbon.

37. Moon with Face 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Moon
    ctx.arc(width * 0.5, height * 0.5, height * 0.4, Math.PI * 0.2, Math.PI * 1.8);
    
    // Eyes
    ctx.moveTo(width * 0.4, height * 0.4);
    ctx.arc(width * 0.4, height * 0.4, height * 0.05, 0, Math.PI * 2);
    
    ctx.moveTo(width * 0.6, height * 0.4);
    ctx.arc(width * 0.6, height * 0.4, height * 0.05, 0, Math.PI * 2);
    
    // Smile
    ctx.moveTo(width * 0.4, height * 0.55);
    ctx.bezierCurveTo(
        width * 0.45, height * 0.65,
        width * 0.55, height * 0.65,
        width * 0.6, height * 0.55
    );
}

A crescent moon with a friendly face.

38. Sun with Rays 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Center circle
    ctx.arc(width * 0.5, height * 0.5, height * 0.2, 0, Math.PI * 2);
    
    // Rays
    for (let i = 0; i < 8; i++) {
        const angle = (Math.PI * 2 * i) / 8;
        const x1 = width * 0.5 + height * 0.25 * Math.cos(angle);
        const y1 = height * 0.5 + height * 0.25 * Math.sin(angle);
        const x2 = width * 0.5 + height * 0.4 * Math.cos(angle);
        const y2 = height * 0.5 + height * 0.4 * Math.sin(angle);
        
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
    }
    
    // Face
    ctx.moveTo(width * 0.4, height * 0.4);
    ctx.arc(width * 0.4, height * 0.4, height * 0.03, 0, Math.PI * 2);
    
    ctx.moveTo(width * 0.6, height * 0.4);
    ctx.arc(width * 0.6, height * 0.4, height * 0.03, 0, Math.PI * 2);
    
    ctx.moveTo(width * 0.45, height * 0.55);
    ctx.bezierCurveTo(
        width * 0.5, height * 0.6,
        width * 0.55, height * 0.6,
        width * 0.6, height * 0.55
    );
}

A smiling sun with radiating rays.

39. Cloud with Rain 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Cloud
    ctx.arc(width * 0.3, height * 0.4, height * 0.2, Math.PI * 0.5, Math.PI * 1.5);
    ctx.arc(width * 0.5, height * 0.3, height * 0.25, Math.PI * 1.0, Math.PI * 2.0);
    ctx.arc(width * 0.7, height * 0.4, height * 0.2, Math.PI * 1.5, Math.PI * 0.5);
    ctx.arc(width * 0.5, height * 0.5, height * 0.2, Math.PI * 0.0, Math.PI * 1.0);
    
    // Rain drops
    ctx.moveTo(width * 0.4, height * 0.7);
    ctx.lineTo(width * 0.45, height * 0.8);
    
    ctx.moveTo(width * 0.5, height * 0.65);
    ctx.lineTo(width * 0.55, height * 0.75);
    
    ctx.moveTo(width * 0.6, height * 0.7);
    ctx.lineTo(width * 0.65, height * 0.8);
}

A cloud with falling raindrops.

40. Star with Sparkles 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Star
    ctx.moveTo(width * 0.5, height * 0.1);
    ctx.lineTo(width * 0.6, height * 0.4);
    ctx.lineTo(width * 0.9, height * 0.4);
    ctx.lineTo(width * 0.65, height * 0.6);
    ctx.lineTo(width * 0.8, height * 0.9);
    ctx.lineTo(width * 0.5, height * 0.7);
    ctx.lineTo(width * 0.2, height * 0.9);
    ctx.lineTo(width * 0.35, height * 0.6);
    ctx.lineTo(width * 0.1, height * 0.4);
    ctx.lineTo(width * 0.4, height * 0.4);
    ctx.closePath();
    
    // Sparkles
    ctx.moveTo(width * 0.2, height * 0.2);
    ctx.lineTo(width * 0.25, height * 0.15);
    ctx.lineTo(width * 0.3, height * 0.2);
    ctx.lineTo(width * 0.25, height * 0.25);
    ctx.closePath();
    
    ctx.moveTo(width * 0.7, height * 0.7);
    ctx.lineTo(width * 0.75, height * 0.65);
    ctx.lineTo(width * 0.8, height * 0.7);
    ctx.lineTo(width * 0.75, height * 0.75);
    ctx.closePath();
}

A star shape with decorative sparkles.

Code copied to clipboard!