PentestCanvas

// tech stack

ReactCanvas APINode.jsExpressSQLiteDocker

// the challenge

Security teams used spreadsheets and markdown files to map attack surfaces. No visual tool existed that matched their workflow and integrated with existing security tooling.

// the solution

Built a canvas-based visual editor using the HTML5 Canvas API. Nodes represent assets, edges represent attack paths. Integrates live with ZAP and Burp via their REST APIs.

// measurable impact

Used by 340+ security professionals. Cut report generation time from 3 hours to 25 minutes.

Timeline: 5 months
Team: 2 engineers
Role: Full-stack Developer

// key highlights

◆Drag-and-drop attack graph builder with CVSS scoring
◆Burp Suite and OWASP ZAP API integration
◆One-click compliance report generation (PDF/DOCX)
◆Collaborative mode with real-time cursors via WebRTC

// implementation sample

// Canvas node renderer with selection and drag
class AttackNode {
  constructor(
    public id: string,
    public x: number,
    public y: number,
    public type: 'asset' | 'vuln' | 'entry',
    public cvss: number
  ) {}

  render(ctx: CanvasRenderingContext2D, selected: boolean) {
    const color = this.type === 'entry' ? '#FF3B6B'
      : this.cvss > 7 ? '#FFB800' : '#00FF87';
    ctx.beginPath();
    ctx.arc(this.x, this.y, 24, 0, Math.PI * 2);
    ctx.fillStyle = color + '15';
    ctx.fill();
    ctx.strokeStyle = selected ? '#fff' : color;
    ctx.stroke();
  }
}