super-canvas v1.0.36
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
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
})
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago