JavaScript Shape Examples

21. Octagon Shape

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

A regular octagon with eight equal sides.

22. Rounded Rectangle

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const radius = 20;
    
    ctx.moveTo(width * 0.2 + radius, height * 0.2);
    ctx.lineTo(width * 0.8 - radius, height * 0.2);
    ctx.quadraticCurveTo(width * 0.8, height * 0.2, width * 0.8, height * 0.2 + radius);
    ctx.lineTo(width * 0.8, height * 0.8 - radius);
    ctx.quadraticCurveTo(width * 0.8, height * 0.8, width * 0.8 - radius, height * 0.8);
    ctx.lineTo(width * 0.2 + radius, height * 0.8);
    ctx.quadraticCurveTo(width * 0.2, height * 极.8, width * 0.2, height * 0.8 - radius);
    ctx.lineTo(width * 0.2, height * 0.2 + radius);
    ctx.quadraticCurveTo(width * 0.2, height * 0.2, width * 0.2 + radius, height * 0.2);
    ctx.closePath();
}

A rectangle with rounded corners for a softer look.

23. Five-point Star

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    for (let i = 0; i < 5; i++) {
        const angle = (Math.PI * 2 * i) / 5 - Math.PI / 2;
        const outerX = width * 0.5 + width * 0.4 * Math.cos(angle);
        const outerY = height * 0.5 + height * 0.4 * Math.sin(angle);
        
        if (i === 0) {
            ctx.moveTo(outerX, outerY);
        } else {
            ctx.lineTo(outerX, outerY);
        }
        
        const innerAngle = angle + Math.PI / 5;
        const innerX = width * 0.5 + width * 0.2 * Math.cos(innerAngle);
        const innerY = height * 0.5 + height * 0.2 * Math.sin(innerAngle);
        ctx.lineTo(innerX, innerY);
    }
    ctx.closePath();
}

A perfect five-point star with equal points.

24. Ring/Donut

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 (creates hole)
    ctx.moveTo(width * 0.5 + height * 0.3, height * 0.5);
    ctx.arc(width * 0.5, height * 0.5, height * 0.3, 0, Math.PI * 2, true);
}

A ring or donut shape with a hollow center.

25. Triangle

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.9);
    ctx.lineTo(width * 0.1, height * 0.9);
    ctx.closePath();
}

A simple equilateral triangle shape.

26. Parallelogram

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.3, height * 0.2);
    ctx.lineTo(width * 0.8, height * 0.2);
    ctx.lineTo(width * 0.6, height * 0.8);
    ctx.lineTo(width * 0.1, height * 0.8);
    ctx.closePath();
}

A parallelogram with slanted sides.

27. Ellipse

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    const centerX = width * 0.5;
    const centerY = height * 0.5;
    const radiusX = width * 0.4;
    const radiusY = height * 0.3;
    
    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
}

An oval or elliptical shape.

28. Four-point Star

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 * 极.4, height * 0.4);
    ctx.closePath();
}

A four-point star, also known as a cross star.

29. Right Triangle

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);
    ctx.lineTo(width * 0.2, height * 0.8);
    ctx.closePath();
}

A right-angled triangle with one 90-degree angle.

30. Trapezoid

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.3, height * 0.2);
    ctx.lineTo(width * 0.7, height * 0.2);
    ctx.lineTo(width * 0.8, height * 0.8);
    ctx.lineTo(width * 0.2, height * 0.8);
    ctx.closePath();
}

A trapezoid with one pair of parallel sides.

31. Crescent Moon (Alternative)

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Outer arc
    ctx.arc(width * 0.5, height * 0.5, height * 0.4, -Math.PI/2, Math.PI/2);
    
    // Inner arc to create crescent
    ctx.arc(width * 0.3, height * 0.5, height * 0.3, Math.PI/2, -Math.PI/2, true);
    ctx.closePath();
}

An alternative crescent moon shape with a different orientation.

32. Chevron

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.1, height * 0.3);
    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.9, height * 0.3);
    ctx.lineTo(width * 0.65, height * 0.5);
    ctx.lineTo(width * 0.9, height * 0.7);
    ctx.lineTo(width * 0.6, height * 0.7);
    ctx.lineTo(width * 0.5, height * 0.9);
    ctx.lineTo(width * 0.4, height * 0.7);
    ctx.lineTo(width * 0.1, height * 0.7);
    ctx.lineTo(width * 0.35, height * 0.5);
    ctx.closePath();
}

A chevron or arrowhead shape pointing upward.

33. Pentagon

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

A regular pentagon with five equal sides.

34. Curved Arrow

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    // Arrow shaft (curved)
    ctx.moveTo(width * 0.2, height * 0.5);
    ctx.quadraticCurveTo(width * 0.5, height * 0.2, width * 0.8, height * 0.5);
    
    // Arrow head
    ctx.lineTo(width * 0.7, height * 0.4);
    ctx.lineTo(width * 0.9, height * 0.5);
    ctx.lineTo(width * 0.7, height * 0.6);
    ctx.lineTo(width * 0.8, height * 0.5);
    ctx.closePath();
}

A curved arrow with a flowing shape.

35. Ribbon

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.2, height * 0.3);
    ctx.lineTo(width * 0.8, height * 0.3);
    ctx.lineTo(width * 0.7, height * 0.7);
    ctx.lineTo(width * 0.5, height * 0.5);
    ctx.lineTo(width * 0.3, height * 0.7);
    ctx.closePath();
}

A ribbon or banner shape with folded ends.

36. Drop 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.3,
        width * 0.8, height * 0.7,
        width * 0.5, height * 0.9
    );
    ctx.bezierCurveTo(
        width * 0.2, height * 0.7,
        width * 0.2, height * 0.3,
        width * 0.5, height * 0.1
    );
    ctx.closePath();
}

A water drop shape, pointed at the top and rounded at the bottom.

37. Bolt/Lightning

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

A lightning bolt or electricity symbol.

38. Semicircle

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.arc(width * 0.5, height * 0.5, height * 0.4, 0, Math.PI);
    ctx.lineTo(width * 0.1, height * 0.5);
    ctx.closePath();
}

A half-circle or semicircular shape.

39. Beveled Square

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    ctx.moveTo(width * 0.3, height * 0.2);
    ctx.lineTo(width * 0.8, height * 0.2);
    ctx.lineTo(width * 0.9, height * 0.3);
    ctx.lineTo(width * 0.9, height * 0.8);
    ctx.lineTo(width * 0.8, height * 0.9);
    ctx.lineTo(width * 0.2, height * 0.9);
    ctx.lineTo(width * 0.1, height * 0.8);
    ctx.lineTo(width * 0.1, height * 0.2);
    ctx.closePath();
}

A square with beveled or chamfered corners.

40. Quatrefoil

function drawCustomShape(ctx) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    
    const centerX = width * 0.5;
    const centerY = height * 0.5;
    const radius = height * 0.2;
    
    // Draw four circles
    ctx.arc(centerX, centerY - radius, radius, 0, Math.PI * 2);
    ctx.moveTo(centerX + radius, centerY);
    ctx.arc(centerX + radius, centerY, radius, 0, Math.PI * 2);
    ctx.moveTo(centerX, centerY + radius);
    ctx.arc(centerX, centerY + radius, radius, 0, Math.PI * 2);
    ctx.moveTo(centerX - radius, centerY);
    ctx.arc(centerX - radius, centerY, radius, 0, Math.PI * 2);
}

A decorative quatrefoil shape made from four overlapping circles.

Sticker shape JavaScript