<div class="editor" />
body {
margin: 0;
padding: 0;
}
.editor {
width: 100%;
height: 100vh;
background: #eee;
}
import * as pikaso from "https://cdn.skypack.dev/[email protected]";
const editor = new Pikaso({
container: document.querySelector('.editor'),
selection: {
transformer: {
borderStroke: '#262626',
anchorColor: '#262626',
anchorStroke: '#262626',
anchorFill: '#262626',
anchorSize: 10
}
},
measurement: {
background: {
fill: 'purple',
cornerRadius: 5
},
text: {
fill: '#fff',
padding: 5,
fontSize: 14,
fontStyle: 'bold'
}
}
})
const rect = editor.shapes.rect.insert({
x: editor.board.stage.width() / 2 - 125,
y: editor.board.stage.height() / 2 - 70,
width: 250,
height: 140,
fill: 'red'
})
rect.select()
This Pen doesn't use any external CSS resources.