Sticker shape JavaScript

20 customizable shape functions for your sticker creator. Click the copy button to use any shape.

1. Star Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    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();
}

A classic 5-point star shape perfect for decorations and badges.

2. Heart Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    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
    );
    ctx.closePath();
}

A symmetrical heart shape created with Bezier curves.

3. Cloud Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    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极I * 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);
    ctx.closePath();
}

A fluffy cloud shape made from multiple arc segments.

4. Diamond Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.5, height * 0.1);
    ctx.lineTo(width * 0.9, height * 0.5);
    ctx.lineTo(width * 0.5, height * 0.9);
    ctx.lineTo(width * 0.1, height * 0.5);
    ctx.closePath();
}

A simple diamond shape, perfect for gems and jewelry.

5. Hexagon Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    for (let i = 0; i < 6; i++) {
        const angle = (Math.PI * 2 * i) / 6 - Math.PI / 6;
        const x = width * 0.5 + width * 0.4 * Math.cos(angle);
        const y = height * 0.极 + height * 0.4 * Math.sin(angle);
        
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.closePath();
}

A regular hexagon with equal sides and angles.

6. Speech Bubble 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Main bubble
    ctx.moveTo(width * 0.2, height * 0.2);
    ctx.lineTo(width * 0.8, height * 0.2);
    ctx.lineTo(width * 0.8, height * 0.7);
    ctx.lineTo(width * 0.5, height * 0.7);
    ctx.lineTo(width * 0.4, height * 0.9);
    ctx.lineTo(width * 0.45, height * 0.7);
    ctx.lineTo(width * 0.2, height * 0.7);
    ctx.closePath();
}

A classic speech bubble with a pointer for comic effects.

7. Crescent Moon 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Outer circle
    ctx.arc(width * 0.5, height * 0.5, height * 0.4, 0, Math.PI * 2);
    
    // Inner circle to create the crescent
    ctx.moveTo(width * 0.6, height * 0.5);
    ctx.arc(width * 0.6, height * 0.5, height * 0.3, 0, Math.PI * 2, true);
}

A crescent moon shape created by combining two circles.

8. Arrow Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.1, height * 0.5);
    ctx.lineTo(width * 0.7, height * 0.5);
    ctx.lineTo(width * 0.7, height * 0.3);
    ctx.lineTo(width * 0.9, height * 0.5);
    ctx.lineTo(width * 0.7, height * 0.7);
    ctx.lineTo(width * 0.7, height * 0.5);
    ctx.closePath();
}

A right-pointing arrow shape for directions and pointers.

9. Infinity Symbol 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.2, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.2, height * 0.2,
        width * 0.8, height * 0.2,
        width * 0.8, height * 0.5
    );
    ctx.bezierCurveTo(
        width * 0.8, height * 0.8,
        width * 0.2, height * 0.8,
        width * 0.2, height * 0.5
    );
    ctx.bezierCurveTo(
        width * 0.2, height * 0.2,
        width * 0.8, height * 0.2,
        width * 0.8, height * 0.5
    );
}

An infinity symbol created with Bezier curves.

10. Gear Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const teeth = 10;
    const innerRadius = height * 0.3;
    const outerRadius = height * 0.4;
    
    for (let i = 0; i < teeth * 2; i++) {
        const angle = (Math.PI * 2 * i) / (teeth * 2);
        const radius = i % 2 === 0 ? outerRadius : innerRadius;
        const x = width * 0.5 + radius * Math.cos(angle);
        const y = height * 0.5 + radius * Math.sin(angle);
        
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.closePath();
}

A gear/cogwheel shape with teeth for mechanical designs.

11. Spiral Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const centerX = width * 0.5;
    const centerY = height * 0.5;
    const maxRadius = height * 0.4;
    const coils = 4;
    const rotation = Math.PI * 2;
    
    ctx.moveTo(centerX, centerY);
    for (let i = 0; i <= 100; i++) {
        const angle = i / 100 * rotation * coils;
        const radius = maxRadius * (i / 100);
        const x = centerX + Math.cos(angle) * radius;
        const y = centerY + Math.sin(angle) * radius;
        ctx.lineTo(x, y);
    }
}
}

A spiral shape that can be used for decorative elements.

12. Puzzle Piece 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.2, height * 0.2);
    ctx.lineTo(width * 0.8, height * 0.2);
    // Tab
    ctx.bezierCurveTo(
        width * 0.85, height * 0.2,
        width * 0.85, height * 0.4,
        width * 0.8, height * 0.4
    );
    ctx.lineTo(width * 0.8, height * 0.8);
    ctx.lineTo(width * 0.2, height * 0.8);
    ctx.lineTo(width * 0.2, height * 0.4);
    // Tab
    ctx.bezierCurveTo(
        width * 0.15, height * 0.4,
        width * 0.15, height * 0.2,
        width * 0.2, height * 0.2
    );
    ctx.closePath();
}

A puzzle piece shape with connection tabs.

13. Butterfly Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Right wing
    ctx.moveTo(width * 0.5, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.7, height * 0.3,
        width * 0.9, height * 0.2,
        width * 0.8, height * 0.6
    );
    ctx.bezierCurveTo(
        width * 0.9, height * 0.8,
        width * 0.7, height * 0.9,
        width * 0.5, height * 0.7
    );
    
    // Left wing
    ctx.moveTo(width * 0.5, height * 0.5);
    ctx.bezierCurveTo(
        width * 0.3, height * 0.3,
        width * 0.1, height * 0.2,
        width * 0.2, height * 0.6
    );
    ctx.bezierCurveTo(
        width * 0.1, height * 0.8,
        width * 0.3, height * 0.9,
        width * 0.5, height * 0.7
    );
    ctx.closePath();
}

A symmetrical butterfly shape with detailed wings.

14. Leaf Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.5, height * 0.1);
    ctx.bezierCurveTo(
        width * 0.8, height * 0.2,
        width * 0.9, height * 0.5,
        width * 0.7, height * 0.8
    );
    ctx.bezierCurveTo(
        width * 0.5, height * 0.9,
        width * 0.3, height * 极.7,
        width * 0.5, height * 0.1
    );
    ctx.closePath();
}

A simple leaf shape with curved edges.

15. Shield Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.5, height * 0.1);
    ctx.lineTo(width * 0.9, height * 0.4);
    ctx.lineTo(width * 0.8, height * 0.8);
    ctx.lineTo(width * 0.5, height * 0.9);
    ctx.lineTo(width * 0.2, height * 0.8);
    ctx.lineTo(width * 0.1, height * 0.4);
    ctx.closePath();
}

A classic shield shape with a curved bottom.

16. Starburst 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const points = 16;
    const innerRadius = height * 0.2;
    const outerRadius = height * 0.4;
    
    for (let i = 0; i < points * 2;极++) {
        const angle = (Math.PI * 2 * i) / (points * 2);
        const radius = i % 2 === 0 ? outerRadius : innerRadius;
        const x = width * 0.5 + radius * Math.cos(angle);
        const y = height * 0.5 + radius * Math.sin(angle);
        
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.closePath();
}

A starburst shape with alternating points for emphasis.

17. Tear Drop 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.5, height * 0.1);
    ctx.bezierCurveTo(
        width * 0.1, height * 0.3,
        width * 0.1, height * 0.7,
        width * 0.5, height * 0.9
    );
    ctx.bezierCurveTo(
        width * 0.9, height * 0.7,
        width * 0.9, height * 0.3,
        width * 0.5, height * 0.1
    );
    ctx.closePath();
}

A teardrop shape that's pointed at the top and rounded at the bottom.

18. Cross Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Vertical part
    ctx.moveTo(width * 0.4, height * 0.1);
    ctx.lineTo(width * 0.6, height * 0.1);
    ctx.lineTo(width * 0.6, height * 0.4);
    ctx.lineTo(width * 0.9, height * 0.4);
    ctx.lineTo(width * 0.9, height * 0.6);
    ctx.lineTo(width * 0.6, height * 0.6);
    ctx.lineTo(width * 0.6, height * 0.9);
    ctx.lineTo(width * 0.4, height * 0.9);
    ctx.lineTo(width * 0.4, height * 0.6);
    ctx.lineTo(width * 0.1, height * 0.6);
    ctx.lineTo(width * 0.1, height * 0.4);
    ctx.lineTo(width * 0.4, height * 0.4);
    ctx.closePath();
}

A plus sign/cross shape with equal arms.

19. Crown Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.1, height * 0.5);
    ctx.lineTo(width * 0.2, height * 0.3);
    ctx.lineTo(width * 0.3, height * 0.5);
    ctx.lineTo(width * 0.4, height * 0.3);
    ctx.lineTo(width * 0.5, height * 0.5);
    ctx.lineTo(width * 0.6, height * 0.3);
    ctx.lineTo(width * 0.7, height * 0.5);
    ctx.lineTo(width * 0.8, height * 0.3);
    ctx.lineTo(width * 0.9, height * 0.5);
    ctx.lineTo(width * 0.9, height * 0.8);
    ctx.lineTo(width * 0.1, height * 0.8);
    ctx.closePath();
}

A crown shape with triangular points along the top.

20. Flower Shape 
function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const petals = 6;
    
    for (let i = 0; i < petals; i++) {
        const angle = (Math.PI * 2 * i) / petals;
        const x = width * 0.5 + height * 0.3 * Math.cos(angle);
        const y = height * 0.5 + height * 0.3 * Math.sin(angle);
        
        ctx.moveTo(width * 0.5, height * 0.5);
        ctx.arc(x, y, height * 0.2, angle, angle + Math.PI * 2 / petals);
    }
    ctx.closePath();
}

A flower shape with multiple petals arranged in a circle.

Code copied to clipboard!