Super canvas

This is a lightweight extension of the html canvas, that allow you to draw and interact with shapes in a intuitive way.

features:

• draw shapes that update the canvas automatically when its properties are changed
• check if a point is over the shape
• get the closest point to the corner of the shape

interactive example

example source code

how to use:

import { Surface } from "super-canvas"

const surface = Surface({
    // optional parameters
    w:800, // change canvas width
    h:600, // change canvas height
    canvas:myCanvas // use existing canvas, if is not passed a new canvas will be created
}) 

// you can access the canvas by using surface.canvas

var centerX = 800 / 2;
var centerY = 600 / 2;

const circle = surface.add({
    // mandatory
    type: "ellipse", // shape type (the required parameters vary for every shape type, most of the optional are valid to all shape types)
    x: centerX, // X coordinate
    y: centerY, // Y coordinate
    w: 100, // width
    h: 100, // height
    // optional
    backgroundColor: "#BF4F51", // background color
    border: { // a border around the shape, just like the css border
        thickness: 3, // thickness of the border
        color: "black" // color of the border
    },
    layer: 2, // setting the layer property will tell which order the elements should be rendered
})

You can remove the element by calling;

circle.remove()

You can remove all elements by calling;

surface.clear()

All properties of the element, are available on the result object, and changing them will result on a canvas updated.

circle.x = 200

Each time you add or change a element will result in a canvas redraw, but you can instead use transaction, so when modifying or adding multiple things at once result on a single redraw.

surface.beginTransaction()
// add or update shapes here
surface.endTransaction()

With any shape you can call this function to get if a point intersects with it.

circle.pointOnShape({x:mouseX,y:mouseY})

You can also call this function to get the closest point to the edge of this shape.

const {x,y} = element.getClosestPoint({x:mouseX,y:mouseY})

More shapes

const text = surface.add({
    // mandatory
    type: "text", // shape type
    text: "hello",  // text
    x:100, // X coordinate
    y:200, // Y coordinate
    // optional
    font: "Arial", // font
    fontSize: 50, // font size (pt)
    verticalAlign: "center",  // top | center | bottom
    horizontalAlign: "center", // start | center | end
    backgroundColor: "#BF4F51",
    border: {
        thickness: 3,
        color: "black",
    },
})

const square = surface.add({
    // mandatory
    type: "rect", // shape type
    x: centerX-120, // X coordinate
    y: centerY, // Y coordinate
    w: 100, // width
    h: 100, // height
    // optional
    backgroundColor: "#BF4F51", // background color
    border: { // border
        thickness: 3, // border thickness
        color: "black", // border color
        radius:10, // border radius just like the css border radius
    },
})

const shape = surface.add({
    // mandatory
    type: "shape", // shape type
    segments:[ // segments of the polygon
        {
            x: 300,
            y: 20,
        },
        {
            x: 400,
            y: 100,
        },
        {
            x: 500,
            y: 20,
        }
        ,
        {
            x: 400,
            y: 50,
        }
    ],
    // optional
    x:0,
    y:0,
    backgroundColor: "#BF4F51", //background color
    border: { // border
        thickness: 3, // border thickness
        color: "black", // border color
    },
})

const line = surface.add({
    // mandatory
    type: "line", // shape type
    segments:[ // line segments
        {
            x: 300,
            y: 100,
        },
        {
            x: 400,
            y: 200,
        },
        {
            x: 500,
            y: 100,
        }
    ],
    // optional
    x:0,
    y:0,
    cap: "square",// line ends cap (square | round) default square
    w:10 // width of the line
    backgroundColor: "#BF4F51", // background color
    border: { // border
        thickness: 3, // border thickness
        color: "black", // border color
    },
})

const curve = surface.add({
    // mandatory
    type: "curve", // shape type
    segments:[ // segments of the bezier curve
        {
            x: 20, // X coordinate
            y: 20, // Y coordinate
            hx: 100, // helper X coordinate
            hy: 20, // helper Y coordinate
        },
        {
            x: 100, // ...
            y: 100,
            hx: 100,
            hy: 100,
        }
    ],
    // optional
    x:0,
    y:0,
    cap: "square",// line ends cap (square | round) default square
    w:10 // with of the line
    backgroundColor: "#BF4F51", // background color
    border: { // border
        thickness: 3, // border thickness
        color: "black", // border color
    },
})

you can also draw a surface on another surface

const surface2 = Surface({w:800,h:600})

surface2.add({
    surface, // surface object
    // mandatory
    x:100, // X coordinate
    y:100, // Y coordinate
    // optional
    w:800, // width
    h:600 // height
})