PaperScape Quick Reference
Interactive HTML5 canvas-based visualization and drawing tool
Key Features
- HTML5 canvas drawing and rendering
- Interactive visual elements
- Custom visualization creation
- Event-driven interaction model
- Editable canvas objects
- Modal form integration for editing
- Real-time rendering
Server-Side Usage:
<![CDATA[
// Get the PaperScape API
var PaperScape = js.getObject("/OpenForum/AddOn/PaperScape","PaperScape.sjs");
// Save canvas data
PaperScape.saveCanvas("/MyPage", "canvas.json", canvasData);
// Load canvas data
var canvas = PaperScape.loadCanvas("/MyPage", "canvas.json");
// Export canvas as image
PaperScape.exportImage("/MyPage", "canvas.json", "output.png");
]]>
Client-Side Usage:
<![CDATA[
// Initialize PaperScape canvas
var canvas = document.getElementById('paperScapeCanvas');
var context = canvas.getContext('2d');
// Save canvas state
JSON.post('/OpenForum/AddOn/PaperScape/Save', null,
'pageName=/MyPage&fileName=canvas.json&data=' JSON.stringify(canvasState))
.onSuccess(function(result) {
console.log('Canvas saved');
}).go();
// Load canvas state
JSON.get('/OpenForum/AddOn/PaperScape/Load', null,
'pageName=/MyPage&fileName=canvas.json')
.onSuccess(function(canvasData) {
// Render canvas from data
renderCanvas(canvasData);
}).go();
]]>
Canvas Data Format
<![CDATA[
{
"objects": [
{
"type": "rectangle",
"x": 100, "y": 100,
"width": 200, "height": 150,
"color": "#ff0000"
},
{
"type": "circle",
"x": 300, "y": 300,
"radius": 50,
"color": "#00ff00"
}
]
}
]]>
Configuration
- Canvas size and background color
- Interactive editing enabled/disabled
- Object types and properties
- Event handlers for canvas interactions