1.3.5 • Published 7 months ago
canvas-parameters v1.3.5
Usage/Examples
paste this code double click to show parameters
Installation
Install сanvas-parameters with npm
npm i canvas-parameters
Example usage
import CanvasParameters from "canvas-parameters";
const defaultParameters = {
xPos: 200,
yPos: 250,
width: 25,
height: 50,
color: "#00ff00",
};
const createCanvas = () => {
const canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
if (!ctx) throw new Error("ctx is not defined");
return ctx;
};
const ctx = createCanvas();
const drawRectange = () => {
ctx.clearRect(0, 0, 500, 500);
ctx.fillStyle = defaultParameters.color;
ctx.fillRect(
defaultParameters.xPos,
defaultParameters.yPos,
defaultParameters.width,
defaultParameters.height,
);
};
drawRectange();
new CanvasParameters(
[
{
type: "number",
placeholder: "Rectangle x position",
name: "xPos",
value: defaultParameters.xPos.toString(),
onChange: (value) => {
defaultParameters.xPos = value;
},
},
{
type: "number",
placeholder: "Rectangle y position",
name: "yPos",
value: defaultParameters.yPos.toString(),
onChange: (value) => {
defaultParameters.yPos = value;
},
},
{
type: "range",
min: "1",
max: "100",
placeholder: "Rectangle width",
name: "width",
value: defaultParameters.width.toString(),
onChange: (value) => {
defaultParameters.width = value;
},
},
{
type: "range",
min: "1",
max: "100",
placeholder: "Rectangle height",
name: "height",
value: defaultParameters.height.toString(),
onChange: (value) => {
defaultParameters.height = value;
},
},
{
type: "color",
placeholder: "Rectagle color",
name: "color",
value: defaultParameters.color,
onChange: (value) => {
defaultParameters.color = value;
},
},
],
{
onUpdateCanvas: drawRectange,
},
);
1.2.0
7 months ago
1.2.8
7 months ago
1.2.7
7 months ago
1.3.5
7 months ago
1.2.6
7 months ago
1.3.4
7 months ago
1.2.5
7 months ago
1.3.3
7 months ago
1.2.4
7 months ago
1.3.2
7 months ago
1.2.3
7 months ago
1.3.1
7 months ago
1.2.2
7 months ago
1.3.0
7 months ago
1.2.1
7 months ago
1.2.9
7 months ago
1.2.12
7 months ago
1.2.13
7 months ago
1.2.10
7 months ago
1.2.11
7 months ago
1.2.14
7 months ago
1.1.4
7 months ago
1.1.3
7 months ago
1.1.2
7 months ago
1.1.1
7 months ago
1.1.0
7 months ago
1.0.0
7 months ago