Skip to main content

​
Overview

BLACKICE Portal includes a powerful drawing canvas built with p5.js, offering professional-grade drawing tools, image manipulation, and AI vision capabilities.

Drawing canvas

Full-featured drawing with brushes, shapes, and tools

Image import

Import and edit images with filters

AI vision

Ask questions about your canvas content

Export

Download as PNG with transparent background

​
Vision drawing canvas

​
Getting started

The drawing canvas is powered by p5.js and includes Puter.js for AI capabilities.
The canvas uses p5.js 1.4.2 for rendering and MediaPipe for advanced features.

​
Tools overview

Available tools:
🖌️ Brush Tool (default)Free-form drawing with customizable size and color.Properties:
  • Size: 1-20px
  • Color: Full RGB spectrum
  • Cap style: Round, Butt, Square
  • Join style: Round, Miter, Bevel
// Brush configuration
{
  "tool": "brush",
  "size": 4,
  "color": "#000000",
  "cap": "round",
  "join": "round"
}

​
Brush customization

Color picker: 
<!-- HTML5 color input -->
<input type="color" id="color" value="#000000">
  • Click color picker to choose any RGB color
  • Live hex value display
  • Recent colors saved
Size slider:
  • Range: 1-20 pixels
  • Real-time preview
  • Slider control for precision
Cap and join styles:
Round Cap: Smooth rounded ends (default)Butt Cap: Flat, squared ends at exact endpointSquare Cap: Extended square ends beyond endpoint
strokeCap(ROUND);  // or BUTT, SQUARE
Round Join: Smooth curved corners (default)Miter Join: Sharp pointed cornersBevel Join: Flat beveled corners
strokeJoin(ROUND);  // or MITER, BEVEL

​
Image manipulation

​
Importing images

How to import:
  1. Click Import image file input
  2. Select image file (JPG, PNG, GIF, WebP)
  3. Image loads onto canvas
  4. Draw over or modify imported image
Supported formats: 
Image formats:
  - JPEG (.jpg, .jpeg)
  - PNG (.png)
  - GIF (.gif)
  - WebP (.webp)
  - SVG (.svg)
Imported images are added to the canvas and become part of the drawing. You can draw over them or apply filters.

​
Image filters

Apply visual filters to your entire canvas. Available filters:
Convert canvas to black and white.
// Grayscale filter
filter(GRAY);
Use cases:
  • Artistic sketches
  • Print-ready images
  • Reduce visual complexity
Applying filters:
  1. Select filter from dropdown
  2. Click Apply Filter button
  3. Filter applies to entire canvas
  4. Use Undo to revert if needed

​
AI vision features

​
Ask about your canvas

Use AI to analyze and answer questions about your drawing.
AI vision is powered by Puter.js AI capabilities and can identify objects, text, and compositions in your canvas.
How to use:
  1. Draw or import content on canvas
  2. Type question in “Ask something about the canvas” field
  3. Click Ask AI button
  4. AI analyzes canvas and provides answer
Example questions: 
Sample queries:
  - "What objects are in this drawing?"
  - "What colors dominate this image?"
  - "Describe this composition"
  - "Is there any text in this image?"
  - "What is the main subject?"
AI capabilities:
  • Object detection
  • Text recognition (OCR)
  • Color analysis
  • Composition description
  • Style identification

​
Response display

AI responses appear in the answer panel below the canvas. 
<div id="answer">🧠 Ready.</div>
  • Initial state: ”🧠 Ready.”
  • Loading: Shows thinking indicator
  • Response: Displays AI answer
  • Error: Shows error message if query fails

​
Canvas management

​
Undo/Redo

Full history tracking with unlimited undo/redo. How it works: 
// Canvas states saved to array
let history = [];
let historyIndex = -1;

// Undo: Go back one state
function undo() {
  if (historyIndex > 0) {
    historyIndex--;
    restoreState(history[historyIndex]);
  }
}

// Redo: Go forward one state
function redo() {
  if (historyIndex < history.length - 1) {
    historyIndex++;
    restoreState(history[historyIndex]);
  }
}
Keyboard shortcuts:
  • Undo: Ctrl/Cmd + Z
  • Redo: Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y

​
Clear canvas

Remove all content and start fresh. Clear button:
  • Removes all drawings
  • Clears imported images
  • Resets to blank white canvas
  • Cannot be undone (clears history)
Clearing the canvas removes all history. Make sure to download your work first!

​
Download artwork

Export your canvas as a PNG image. Download process: 
// Save canvas as PNG
function downloadCanvas() {
  save('drawing.png');
}
File properties:
  • Format: PNG (Portable Network Graphics)
  • Transparency: Preserved
  • Resolution: Canvas size (default 800x600)
  • Filename: drawing.png

​
Zoom controls

​
Zoom in/out

Zoom into your canvas for detailed work. Zoom buttons:
  • 🔍 Zoom In: Increase canvas scale
  • 🔍 Zoom Out: Decrease canvas scale
  • Maintains aspect ratio
  • Redraws canvas at new scale
Zoom levels: 
let zoomLevel = 1.0;  // 100%

// Zoom in
function zoomIn() {
  zoomLevel *= 1.1;  // +10%
  scale(zoomLevel);
}

// Zoom out
function zoomOut() {
  zoomLevel *= 0.9;  // -10%
  scale(zoomLevel);
}

​
Canvas statistics

Real-time tracking of canvas elements. Status display: 
<div id="status">
  🖼️ Images: 0 | ✏️ Strokes: 0 | 📝 Text: 0 | 🔳 Shapes: 0
</div>
Tracked elements:
  • Images: Number of imported images
  • Strokes: Brush and eraser strokes
  • Text: Text elements added
  • Shapes: Rectangles, circles, lines

​
Enhanced version

​
Advanced features

Click 🚀 NEW Enhanced Version for additional capabilities: Enhanced features:

Layers

Multiple drawing layers with blend modes

Advanced brushes

Spray paint, calligraphy, pattern brushes

Gradient tools

Linear and radial gradients

Selection tools

Select, move, and transform regions

​
Keyboard shortcuts

ShortcutAction
BBrush tool
RRectangle tool
CCircle tool
LLine tool
TText tool
EEraser tool
Ctrl/Cmd + ZUndo
Ctrl/Cmd + YRedo
DeleteClear canvas

​
Mobile support

Fully responsive touch interface for mobile drawing. Touch features:
  • Touch to draw with finger
  • Pinch to zoom
  • Two-finger pan
  • Touch-optimized toolbar
  • Mobile color picker
Mobile optimizations: 
meta[name="viewport"] {
  content: "width=device-width, initial-scale=1.0";
}
  • Prevents accidental zoom
  • Touch-friendly button sizes
  • Responsive sidebar
  • Full-screen canvas option

​
Performance tips

  1. Use smaller brush sizes for complex drawings
  2. Clear history periodically for large projects
  3. Reduce canvas size if experiencing lag
  4. Disable filters while drawing for smooth performance
  5. Export frequently to save your work

​
Troubleshooting

Refresh page: Reload if canvas freezesCheck browser: Use Chrome, Firefox, or SafariClear cache: Hard refresh with Ctrl/Cmd + Shift + RDisable extensions: Ad blockers may interfere
Check internet: AI requires active connectionCanvas content: Ensure canvas has visible contentQuery format: Ask clear, specific questionsTry again: Some queries may need rephrasing
Browser permissions: Allow downloads in browserFile size: Very large canvases may fail to exportTry different format: Use screenshot if export fails

​
Next steps

Collaboration

Collaborative drawing and whiteboards

Developer utilities

Integrate canvas in web projects

Build docs developers (and LLMs) love

Get started for freeTalk to us