canvas2d-extra

Extra functions for CanvasRenderingContext2D.

Examples

clear

Clears entire canvas

const context = canvas.getContext("2d")!;
clear(context);

Square

strokeSquare

const context = canvas.getContext("2d")!;
strokeSquare(context, { x: 100, y: 100 }, 100);

fillSquare

const context = canvas.getContext("2d")!;
fillSquare(context, { x: 100, y: 100 }, 100);

drawSquare

const context = canvas.getContext("2d")!;
drawSquare(context, { x: 100, y: 100 }, 100, {
    fill: "skyblue",
    stroke: "orange",
});

Circle

strokeCircle

const context = canvas.getContext("2d")!;
strokeCircle(context, { x: 100, y: 100 }, 100);

fillCircle

const context = canvas.getContext("2d")!;
fillCircle(context, { x: 100, y: 100 }, 100);

drawCircle

const context = canvas.getContext("2d")!;
drawCircle(context, { x: 100, y: 100 }, 100, {
    fill: "skyblue",
    stroke: "orange",
});

Path

strokePath

const context = canvas.getContext("2d")!;
strokePath(context, [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    { x: 200, y: 200 },
]);

const context = canvas.getContext("2d")!;
strokePath(context, [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    null,
    { x: 200, y: 200 },
    { x: 100, y: 200 },
    null,
    { x: 150, y: 100 },
    { x: 150, y: 200 },
]);

fillPath

const context = canvas.getContext("2d")!;
fillPath(context, [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    { x: 200, y: 200 },
]);

const context = canvas.getContext("2d")!;
fillPath(context, [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    { x: 200, y: 200 },
    null,
    { x: 100, y: 200 },
    { x: 200, y: 300 },
    { x: 100, y: 300 },
]);

Arrow

drawArrow

const context = canvas.getContext("2d")!;
drawArrow(context, {
    start: { x: 50, y: 50 },
    end: { x: 200, y: 50 },
    headLength: 50,
});

const context = canvas.getContext("2d")!;
// Bezier curve
drawArrow(context, {
    start: { x: 50, y: 50 },
    end: { x: 200, y: 50 },
    control: {
        start: { x: 10, y: 50 },
        end: { x: -10, y: 50 },
    },
    headLength: 50,
});